Растянутый фон но не статичный

@reddask · Регистрация: 28.02.2013

Студворк — интернет-сервис помощи студентам

У меня возник вопрос по реализации не статичного фона растянутого по сайту. Я много не знаю т.к. верстку начал осваивать не давно.
вот ссылка на сайт, в которм мне интересна реализация фона.
https://www.dcuniverseonline.com/home.vm

Буду очень благодарен если вы ответите на мои вопросы.
1) Это адаптивный фон, если да то как он реализован без потери качества?
2) При помощи чего реализован этот сайт CSS или Java?
3) Сильно ли влияет на время загрузки сайта у клиента?
4) Видел еще сайты где фон такой же растянутый но размер его примерно 600 px в высоту а дальше черный фон
Как это реализовать?

С нетерпением жду ваших ответов.

@dartwlad · 28.02.2013, 17:45

1) фон там обычный, статичный, просто картинка качетвенная и большая;
2)css
все очень просто, для реализации и цвета, и фона:

CSS
1
2
3
.body{
background-color:#000;
background-image:url('ссылка на картинку') no-repeat top-center;}

@reddask · 03.03.2013, 23:23 **[ТС]**

Спасибо, а какого размера должна быть такая фон-картинка что бы оптимально на всех разрешениях отображалась?

@Valiant · 04.03.2013, 07:50

Оптимальной картинка будет только в том случае, если она несет чисто фоновый характер без основных признаков выдных и значимых элементов на ней, так как нет оптимального размера картинки, существуют оптимальные рещения отображения этих картинок =)

@dartwlad · 04.03.2013, 20:08

Сообщение от reddask

Спасибо, а какого размера должна быть такая фон-картинка что бы оптимально на всех разрешениях отображалась?

По сути оптимальная - ширина 800px, а высоту какую уже нужно, такую и делаешь. Можно и сделать фон в 1024 в ширину, тоже пойдет.

@Mc Doc · 05.03.2013, 03:32

Господа, осмелюсь вклиниться в вашу беседу, так как сейчас решаю подобную задачу, и прошу совета.

- на сайт, на бакграунд требуется поставить картинку.
- так как разрешения мониторов разное, картинка должна сжиматься или растягиваться.

Как я понял в простом HTML реализовать нельзя. Нужно через CSS. Картинка есть большого размера. Помогите пошагово реализовать.

1 - создал HTML файл, кинул код:

CSS
1
2
3
<style type = "text/css"> 
em { background-image:url('images/Polar-Bear-Underwater-1-1920x1200.jpg') no-repeat top-center; } 
</style>

Малость запутался, что вписать в теги <body> </body>
???

@Valiant · 05.03.2013, 07:23

Сообщение от dartwlad

По сути оптимальная - ширина 800px, а высоту какую уже нужно, такую и делаешь. Можно и сделать фон в 1024 в ширину, тоже пойдет.

И как ты представляешь эту оптимальную фоновую картинку шириной в 800px, которая тянется на весь сайт на моем мониторе с разрешением 1920 на 1080 =D

@dartwlad · 05.03.2013, 22:50

Valiant, ну как тебе сказать. если ты возьмешь человека, у которого 1024 на 768, то ему явно не подойдет 1600 на 900. Потому и нужно выбрать компромисс. Да, 800 может и не надо, но вот от 1024 и до 1300 пошло бы нормально.

@Valiant · 05.03.2013, 22:57

Можно использовать свойство background-size: cover, а также использовать медиа запросы, имеется ввиду грузить нужный рисунок под нужное разрешение

@dartwlad · 05.03.2013, 22:59

Valiant, можно. или же делать под каждый размер разные css, и потом их уже подключить

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@reddask 0 / 0 / 0 Регистрация: 28.02.2013 Сообщений: 5

	Растянутый фон но не статичный 28.02.2013, 07:36. Показов 3088. Ответов 9 Метки нет (Все метки) У меня возник вопрос по реализации не статичного фона растянутого по сайту. Я много не знаю т.к. верстку начал осваивать не давно. вот ссылка на сайт, в которм мне интересна реализация фона. https://www.dcuniverseonline.com/home.vm Буду очень благодарен если вы ответите на мои вопросы. 1) Это адаптивный фон, если да то как он реализован без потери качества? 2) При помощи чего реализован этот сайт CSS или Java? 3) Сильно ли влияет на время загрузки сайта у клиента? 4) Видел еще сайты где фон такой же растянутый но размер его примерно 600 px в высоту а дальше черный фон Как это реализовать? С нетерпением жду ваших ответов. 0

@reddask 0 / 0 / 0 Регистрация: 28.02.2013 Сообщений: 5
	03.03.2013, 23:23 [ТС]
	Спасибо, а какого размера должна быть такая фон-картинка что бы оптимально на всех разрешениях отображалась? 0

@Valiant 39 / 39 / 1 Регистрация: 12.02.2013 Сообщений: 177
	04.03.2013, 07:50
	Оптимальной картинка будет только в том случае, если она несет чисто фоновый характер без основных признаков выдных и значимых элементов на ней, так как нет оптимального размера картинки, существуют оптимальные рещения отображения этих картинок =) 0

@dartwlad 9 / 9 / 1 Регистрация: 24.02.2013 Сообщений: 59
	05.03.2013, 22:50
	Valiant, ну как тебе сказать. если ты возьмешь человека, у которого 1024 на 768, то ему явно не подойдет 1600 на 900. Потому и нужно выбрать компромисс. Да, 800 может и не надо, но вот от 1024 и до 1300 пошло бы нормально. 0

@Valiant 39 / 39 / 1 Регистрация: 12.02.2013 Сообщений: 177
	05.03.2013, 22:57
	Можно использовать свойство background-size: cover, а также использовать медиа запросы, имеется ввиду грузить нужный рисунок под нужное разрешение 0

@dartwlad 9 / 9 / 1 Регистрация: 24.02.2013 Сообщений: 59
	05.03.2013, 22:59
	Valiant, можно. или же делать под каждый размер разные css, и потом их уже подключить 0