Как сделать адаптивный фон в css

Как сделать адаптивный фон-картинку (проблема с высотой при увеличении размера экрана)?

Вроде сделал все верно, но. почему-то фоновая картинка не хочет подгоняться под высоту экрана? В чем ошибка?

body < margin: 0px; padding: 0px; min-width: 320px; position: relative; overflow-x: hidden; >#main < background-image: url(../images/tym2.jpg); background-position: top center; background-attachment: fixed; min-height: 668px; position: relative; -webkit-background-size: cover; background-size: cover; >

• Вопрос задан более трёх лет назад
• 23279 просмотров

Комментировать
Решения вопроса 1

Милок Мурлыка @milokmurlika

Судя по стилям, у вас блок #main занимает 668px, а окно открыто на 785px

Ответ написан более трёх лет назад
Нравится 1 5 комментариев
Василий Петров @mbpig Автор вопроса

Ну, так вот и проблема. При увеличении высоты картинка должнатоже увеличиваться. По ширине все нормально, а по высоте вот нет

Милок Мурлыка @milokmurlika

Василий Петров: фоновая картинка не может становится больше самого блока, у вас блок не растягивается по высоте и картинка не должна

Милок Мурлыка @milokmurlika

Василий Петров: Если хотите что бы каждый блок занимал 100% высоты экрана задайте это как-то явно либо используйте специальные плагины. А так судя по скрину и коду высота фона == высоте блока, а высота блока != высоте экрана

Адаптивная фоновая картинка под все разрешения экрана. CSS-стили

Информация о материале Родительская категория: Программирование Категория: CSS

Использование фоновых картинок в качестве элементов дизайна в большинстве случаев — плохая практика, но при хорошем чувстве стиля и правильной разметке страницы, можно получить хороший вариант, на котором приятно смотрится расположенная поверх фона информация. Тем более, что современные браузеры позволяют легко делать полупрозрачные цвета, которые можно подкладывать промежуточным фоном между фоновым изображением и основным контекстом. В этой статье покажу простейший вариант того, как сделать адаптивное фоновое изображение, которое будет автоматически подстраиваться под ширину экрана пользователя и, кроме этого, для разных устройств будет загружаться своя фоновая картинка.

Подготовка картинки, которая будет использоваться в качестве фона страницы (или блока)

Нет нужды грузить большую фоновую картинку на мобильный телефон, а вот для монитора потребуется картинка с хорошим разрешением и большого размера. Для того, чтобы не изобретать велосипед, воспользуемся стандартной сеткой Bootstrap для разных ширин экранов устройств:

• Экстрамалые девайсы («телефоны», < 576px)
• Малые девайсы («ландшафтные телефоны», >= 576px)
• Средние девайсы («таблетки», >= 768px)
• Большие девайсы (десктопы, >= 992px)
• Экстрабольшие девайсы (большие десктопы, >= 1200px)

Исходя из этой сетки ширин устройств, можно нарезать в Photoshop нужного размера картинки, при этом сохранить их в качестве, достаточном для того, чтобы они не «плыли» при просмотре. Надо ещё учесть и то, что это будет фоновая картинка так, что качество их сжатия можно сделать ниже среднего. В итоге получим четыре картинки. (В качестве фона страниц для мобильных устройств предлагаю не экспериментировать и сделать его однородным, задав в виде обычного цвета).

Все нарезанные картинки поместим в папку images (чтобы не болтались где попало).

HTML-документ с адаптивной фоновой картинкой под все разрешения экрана

Для примера я использую фон для всей страницы и применять стили фона буду к тегу body . Но это может быть и div (или класс для div ), блок, у которого будет фон в виде адаптивной картинки (размеры картинок тогда нужно выбрать соответствующие). Итак, простейший файл index.html для разметки фона с адаптивно позиционирущейся картинкой:

        Тут будет основной контент. 

Как видно из текста, я сразу подключил файл со стилями Bootstrap — это позволит сократить время на подбор шрифтов и изначальных отступов. Ну и подсоединил ещё один файл со стилями css/template.css — как раз в нём и содержится информация о том, какую картинку подгружать пользователю (в зависимости от ширины экрана его устройства) и как её позиционировать.

CSS файл со стилями адаптивной фоновой картинки под все разрешения экрана

И собственно, сами стили для адаптивного размещения и выбора фоновой картинки:

/* Экстрамалые девайсы («телефоны», < 576px) Нет @media, т.к. это по умолчанию в Bootstrap */ body < background-color: #251050; color: #fff; >/* Малые девайсы («ландшафтные телефоны», >= 576px) */ @media (min-width: 576px) < body < background: url(../images/kosmos-sm.jpg); >> /* Средние девайсы («таблетки», >= 768px) */ @media (min-width: 768px) < body < background: url(../images/kosmos-md.jpg); >> /* Большие девайсы (десктопы, >= 992px) */ @media (min-width: 768px) < body < background: url(../images/kosmos-lg.jpg); >> /* Экстрабольшие девайсы (большие десктопы, >= 1200px) */ @media (min-width: 1200px) < body < background: url(../images/kosmos-lx.jpg); >> /* общие стили для всех девайсов */ body

Для адаптации фоновой картинки служит последний блок, который применяется для любых ширин экранов, так как располагается ниже остальных свойств и перепрописывает их. Вот эти свойства для адаптации по центру и пропорционального растягивания картинки по всей площади экрана:

background-size: cover; background-position: center center; background-attachment: fixed;

Готовый пример использования CSS-стилей для адаптивной фоновой картинки под все разрешения экрана

По → этой ссылке ← можно скачать архив со всеми файлами, при распаковке которого получим стили, картинки и собственно сам HTML-документ со всеми свойствами, описанными выше.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

Как сделать адаптивный фон в css

Добро пожаловать в проект «Сайт с нуля» !

Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

2010 — 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla — русские версии.

Автор и администратор данного проекта — SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.

Проект для новичков

Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:

Адаптивный (резиновый) фон для сайта

Приветствую всех посетителей сайта! Сегодня мы будем рассматривать простую технику создания адаптивного фона, который будет полностью растягиваться на всю ширину окна браузера. То есть, при изменении пропорций окна браузера будут меняться и пропорции фонового изображения сайта.

В настоящее время очень популярно в веб-дизайне использование в качестве фона большой картинки или фотографии, которая занимает весь первый экран. Обычно, в верхней части такого изображения размещают меню, логотип, контакты, а основной контент начинается сразу под фото. Как вариант — использование полноэкранных адаптивных слайдеров, подстраивающихся под размеры экрана пользователя.

Для фона рекомендую подобрать качественное изображение высокого разрешения, чтобы на широкоформатных мониторах не происходило его масштабирование. Ведь если фоновая картинка на широкоформатном мониторе окажется меньше размера элемента body, каковым является «тело» вашего сайта, браузер автоматически масштабирует картинку до нужных размеров, а это чревато появлением пикселизации.

В примере я использую изображение размером 3600 Х 2400рх. Исходный вес картинки 2,18 МБ (а это очень много!) я оставила без изменений, чтобы вы смогли убедиться, что «тяжелые» изображения медленнее загружаются, особенно на мобильных устройствах. Поэтому специально для мобильных гаджетов мы будем использовать второй вариант изображения — более малого размера и веса, например, 768 Х 505 рх.

Подключается малое изображение с помощью медиа-запросов, в которых мы задаем максимальную ширину экрана мобильных устройств, в моем примере она 767рх. То есть, на маленьких экранах до 767рх включительно, будет отображаться меньшее изображение (в целях экономии мобильного трафика и увеличения скорости загрузки), а на экранах размером свыше 767рх будет показываться оригинальное изображение.

И малое, и большое изображения обязательно перед использованием оптимизируйте, уменьшите их вес в одном из онлайн-сервисов . Это займет не больше минуты и позволит «сжать» фото по весу в несколько раз.

Перед тем, как приступить к установке адаптивного фонового изображения, в качестве примера приведу несколько сайтов, где вы можете посмотреть принцип работы адаптивного фона. Изменяйте размер окна браузера и увидите, как меняется фоновая картинка.

Адаптивное фоновое изображение для сайта — делаем фоновое изображение адаптивным

Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:

Как это выглядит смотрите на реальном примере:

Посмотреть примерСкачать

Ниже Вы можете увидеть как фоновое изображение адаптируется под различные устройства:

Как сделать адаптивное фоновое изображение для сайта?

HTML часть

Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:

1 2 3 4 5 6 7 8 9

 html> head> title>Заголовок страницы/title> /head> body> /body> /html>

CSS часть

Осталось только задать в файле стилей необходимые свойства, чтобы сделать задуманное — адаптивное фоновое изображение для сайта:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

body { /* Путь к изображению относительно данного файла */ background-image: url(../images/background-photo.jpg); /* Центрирование изображения по вертикали и горизонтали всегда */ background-position: center center; /* Запрещаем повтор изображения */ background-repeat: no-repeat; /* Фиксируем изображение - оно остается на месте при прокрутке окна */ background-attachment: fixed; /* Изображение будет масштабироваться в зависимости от размеров контейнера */ background-size: cover; /* Цвет фона изображения, который будет показываться пока изображение не загрузится */ background-color:#464646; /* Эквивалентная сокращенная запись * background: url(background-photo.jpg) center center cover no-repeat fixed; */ }

Все строки прокомментированы, поэтому я не думаю что с этим кодом могут возникнуть проблемы.

Но это еще не весь код. Так как скорость мобильного интернета ограничены, поэтому страницу нам необходимо оптимизировать в скорости загрузки. На странице находится изображение, которое достаточно большое. Но можно сделать так, чтобы для мобильных устройств загружалось другое изображение, которое меньше.

Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:

1 2 3 4 5 6 7 8 9

/* Для мобильных устройств */ @media only screen and (max-width: 767px) body { /* Если размер экрана меньше 767px показываем уменьшенное изображение, * которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки * на мобильных устройствах */ background-image: url(../images/background-photo-mobile-devices.jpg); } }

Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.

Бонус к статьей «Где брать фоновые изображения?»

Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.

Вывод

Данный эффект очень актуален и его использование можно увидеть практически на каждой продающей странице.