Космос: Адаптивный CSS-фон страницы

Полностью адаптивный фон с использованием CSS

В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. И использовать мы будем CSS — свойство background-size . Без JavaScript :

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

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

Если вы хотите добиться схожей « внешности » в вашем проекте — вы на правильном пути.

Основные понятия

Используем свойство background-size для покрытия всей области просмотра

CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.

Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств

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

Но все же использовать уменьшенные версии фона для мобильных устройств идея неплохая, и я объясню почему.
Изображение, которое будет использовано в примере, имеет размер около 5500 на 3600px .

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

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

HTML

Ниже показано все, что понадобится из разметки:

   . Содержимое вашей страницы. 

Мы назначим фоновое изображение элементу body и таким образом добьемся полного покрытия фоном.

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

CSS

Мы объявляем свойства элемента body следующим образом:

Самое важное свойство-значение в этом списке:

Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. ( В нашем случае этот элемент — body .)

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

А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения ( другими словами появляется пикселизация ):

Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .

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

Для того чтобы наш фон был выровнен по центру, мы объявили следующее:

background-position: center center;

Это установит масштабирующие оси в центр области просмотра.

Далее нам стоит разобраться с ситуацией, когда высота контента больше чем высота области просмотра. Когда подобное происходит — появляется скролл-бар.

Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:

background-attachment: fixed;

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

Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования ( background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.

Следующие значения свойств говорят сами за себя.

Краткая запись CSS

Выше, для наглядности, я определял CSS — свойства в полном виде.

А так выглядит краткая запись:

Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.

Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки

Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.

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

@media only screen and (max-width: 767px) < body < /* Здесь размер файла уменьшен на 93% чтобы увеличить скорость загрузки страницы с мобильных устройств */ background-image: url(images/background-photo-mobile-devices.jpg); >>

Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.

Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px ( или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.

И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.

Заключение

Весь использованный в этом руководстве код вы можете взять с GitHub .

Если и можно что-то добавить на счет этой техники, то это следующее.

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

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

Лицензия: общественное достояние

Если вы хотите использовать код из этой статьи в своих целях — нет необходимости спрашивать, можно ли это делать; весь код размещен как общественное достояние на основе CC0 1.0 Universal .

Исходный код в репозитории GitHub repo не защищен какими либо авторскими правами. Вы можете использовать, продавать, модифицировать и распространять исходный код. Запрос на это вам не нужен.

( Владельцем фоновой картинки я не являюсь. Она принадлежит Unsplash ).

Источник

Адаптивная фоновая картинка под все разрешения экрана. 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-документ со всеми свойствами, описанными выше.

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

Источник