Использование фоновых картинок в качестве элементов дизайна в большинстве случаев — плохая практика, но при хорошем чувстве стиля и правильной разметке страницы, можно получить хороший вариант, на котором приятно смотрится расположенная поверх фона информация. Тем более, что современные браузеры позволяют легко делать полупрозрачные цвета, которые можно подкладывать промежуточным фоном между фоновым изображением и основным контекстом. В этой статье покажу простейший вариант того, как сделать адаптивное фоновое изображение, которое будет автоматически подстраиваться под ширину экрана пользователя и, кроме этого, для разных устройств будет загружаться своя фоновая картинка.
Подготовка картинки, которая будет использоваться в качестве фона страницы (или блока)
Нет нужды грузить большую фоновую картинку на мобильный телефон, а вот для монитора потребуется картинка с хорошим разрешением и большого размера. Для того, чтобы не изобретать велосипед, воспользуемся стандартной сеткой Bootstrap для разных ширин экранов устройств:
- Экстрамалые девайсы («телефоны», < 576px)
- Малые девайсы («ландшафтные телефоны», >= 576px)
- Средние девайсы («таблетки», >= 768px)
- Большие девайсы (десктопы, >= 992px)
- Экстрабольшие девайсы (большие десктопы, >= 1200px)
Исходя из этой сетки ширин устройств, можно нарезать в Photoshop нужного размера картинки, при этом сохранить их в качестве, достаточном для того, чтобы они не «плыли» при просмотре. Надо ещё учесть и то, что это будет фоновая картинка так, что качество их сжатия можно сделать ниже среднего. В итоге получим четыре картинки. (В качестве фона страниц для мобильных устройств предлагаю не экспериментировать и сделать его однородным, задав в виде обычного цвета).
Все нарезанные картинки поместим в папку images (чтобы не болтались где попало).
HTML-документ с адаптивной фоновой картинкой под все разрешения экрана
Для примера я использую фон для всей страницы и применять стили фона буду к тегу body. Но это может быть и div (или класс для div), блок, у которого будет фон в виде адаптивной картинки (размеры картинок тогда нужно выбрать соответствующие). Итак, простейший файл index.html для разметки фона с адаптивно позиционирущейся картинкой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Космос: Адаптивный CSS-фон страницы</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel='stylesheet' href='css/template.css' type='text/css' media='all' />
</head>
<body>
Тут будет основной контент.
</body>
</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;
}Для адаптации фоновой картинки служит последний блок, который применяется для любых ширин экранов, так как располагается ниже остальных свойств и перепрописывает их. Вот эти свойства для адаптации по центру и пропорционального растягивания картинки по всей площади экрана:
background-size: cover;
background-position: center center;
background-attachment: fixed;Готовый пример использования CSS-стилей для адаптивной фоновой картинки под все разрешения экрана
По → этой ссылке ← можно скачать архив со всеми файлами, при распаковке которого получим стили, картинки и собственно сам HTML-документ со всеми свойствами, описанными выше.
