От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.
Примеры адаптивных целых фоновых изображений
В настоящее время довольно популярным стало использование в качестве фона огромной фотографии, которая занимает всю веб-страницу. Вот примеры нескольких сайтов, у которых установлены адаптивные целые фоновые изображения:
Если вы хотели бы добиться похожего результата в вашем следующем веб-проекте, тогда эта статья – это то, что вам нужно.
Базовые принципы
Вот наш план действий.
Используйте свойство background-size, чтобы полностью заполнить окно просмотра
CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.
Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств
Чтобы улучшить скорость загрузки страницы на маленьких экранах, мы будем использовать медиа-запрос для обработки уменьшенной версии нашего фонового изображения. Это необязательно. Эта техника будет работать и без этого. Но почему использование небольшого фонового изображения для мобильных устройств является хорошей идеей?
Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.
Такая огромная дополнительная нагрузка только ради размещения фоновой фотографии в любом случае не принесет ничего хорошего. И, безусловно, это исключительно плохо скажется на соединениях, использующих мобильный Интернет. А также такое разрешение является излишним для устройств с маленьким экраном (подробнее на этом остановимся позже). Давайте рассмотрим весь процесс.
HTML
Для разметки потребуется только это:
|
1 2 3 4 5 6 |
<!doctype html> <html> <body> ...Здесь располагается ваш контент... </body> </html> |
Мы собираемся назначить фоновое изображение для элемента body, чтобы изображение всегда полностью занимало окно просмотра браузера.
Тем не менее, эта техника будет также работать для любого блочного элемента (например, div или form). Если ширина и высота вашего блочного элемента является «резиновой», тогда фоновое изображение всегда будет масштабироваться таким образом, чтобы занять весь контейнер.
CSS
Задаем следующие стили для элемента body:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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; } |
Наиболее важная пара свойство/значение, на которую следует обратить внимание:
|
1 |
background-size: cover; |
Вот, где начинается волшебство. Эта пара свойство/значение сообщает браузеру о том, что нужно масштабировать фоновое изображение пропорционально, т.е. чтобы его ширина и высота были равны или были больше, чем ширина/высота элемента (в нашем случае это элемент body).
Однако у данной пары свойство/значение есть одна проблема: если фоновое изображение меньше размеров элемента body – что произойдет на экранах с высоким разрешением и/или когда у вас огромное количество контента на странице – браузер неизбежно увеличит масштаб изображения. И, как мы знаем, когда мы увеличиваем размеры растрового изображения, качество изображения снижается (другими словами, происходит пикселизация).
Увеличение размера изображения относительно исходных размеров сказывается на качестве изображения. Помните об этом, когда будете выбирать подходящее изображение. В демо-примере используется огромная фотография размером 5500x3600px для широкоформатных мониторов, поэтому потребуется очень большой экран, чтобы произошло искажение качества. Давайте двигаться дальше. Чтобы фоновое изображение всегда было по центру окна просмотра, мы пропишем:
|
1 |
background-position: center center; |
Данная запись располагает фон на координатной оси по центру окна просмотра. Далее нам нужно определить, что будет происходить, когда высота контента превышает видимую высоту окна просмотра. Когда это происходит, появляется полоса прокрутки.
В данном случае нам необходимо сделать так, чтобы фоновое изображение оставалось на исходном месте, даже когда пользователь прокручивает страницу вниз. В данной ситуации изображение либо просто закончиться при прокрутке, либо будет перемещаться по ходу прокрутки (что может сильно отвлекать пользователя). Чтобы зафиксировать фон, мы указываем для свойства background-attachment значение fixed.
|
1 |
background-attachment: fixed; |
В демо-примере я добавил возможность «подгрузить контент», чтобы вы могли посмотреть, что происходит при появлении полосы прокрутки в браузере, когда для свойства background-attachment задано значение fixed. Вы также можете загрузить демо-пример и поиграть со значениями свойств, отвечающих за расположение элементов (например, background-attachment и background-position), чтобы посмотреть, как это повлияет на прокрутку страницы и фоновое изображение. Остальные значения свойств сами по себе довольно понятны.
Сокращенная запись CSS
Я подробно расписал фоновые свойства, чтобы их было легче объяснить. Равнозначной будет и сокращенная запись:
|
1 2 3 |
body { background: url(background-photo.jpg) center center cover no-repeat fixed; } |
Все, что вам необходимо сделать, это изменить значение url, чтобы указать путь до вашего фонового изображения.
Дополнительно: медиа-запрос для маленьких экранов
Для маленьких экранов я использовал программу Photoshop, чтобы пропорционально уменьшить исходное фоновое изображение до размера 768x505px, а также я воспользовался сервисом Smush.it для того, чтобы еще немного уменьшить размер. Благодаря этому размер файла уменьшился с 1741KB до 114KB. Т.е. размер изображения уменьшился на 93%.
Пожалуйста, не поймите меня неправильно, 114KB это все еще довольно много для чисто эстетического элемента дизайна. Учитывая дополнительную нагрузку в 114KB, я бы стал использовать такой файл, только если бы увидел возможность значительно улучшить опыт взаимодействия пользователя с сайтом (UX), т.к. в настоящий момент значительная доля Интернет трафика приходится на работу мобильных устройств.
Вот медиа-запрос:
|
1 2 3 4 5 6 |
@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 c дисплеем retina способен отобразить разрешение 1136x640px – маленькое фоновое изображение будет пикселизовано.
Подводя итог
Вы можете посмотреть более актуальную версию исходного кода из данной обучающей статьи на GitHub. Я могу вас предупредить только об одном: пожалуйста, используйте данную технику с осторожностью, потому что большие файлы могут серьезно повредить UX, особенно если конечный пользователь использует медленное и ненадежное Интернет соединение. Это еще одна причина, почему вам следует подобрать подходящий цвет фона, чтобы пользователь смог прочитать контент, пока фоновое изображение загружается.
Никогда не будет лишним оптимизировать ваши изображения для веба перед использованием на реальном проекте, а помочь вам в этом могут следующие статьи:
Автор: Jacob Gube
Источник: //sixrevisions.com/
Редакция: Команда webformyself.
Комментарии (2)