Рассмотрим, как можно создать адаптивное изображение, которое будет установлено как фон на сайте. Так как оно намного красивее смотрится на мобильных аппаратах. Но и безусловно, чтоб корректно отображалась на самых популярных браузерах. Здесь можно распределить на несколько категорий, но возьмем основные, это для интернет портала, но и для тематических страниц. Которые делаем специально для одной тематики.
Это может быть как услуга или продажа, что безусловно по стилистике должно смотреться просто великолепно, что сейчас подробно узнаем как все можно это создать, а главное правильно сделать. Для начало давайте посмотрим как смотрится адаптивный фон изображение.
Приступаем к созданию адаптивного фонового изображения:
Здесь изначально будем задавать фоновое изображение для body, где аналогичным образом можете сделать под любой блок на странице.
HTML
Код
<!Doctype html>
<html>
<head>
<title>ZorNet - портал для вебмастера</title>
</head>
<body>
Здесь буден написанный контент.
</body>
</html>
Переходим к стилистике, где обязательно нужно задать свойство, чтоб получилось адаптивное фоновая картинка на изображение.
CSS
Код
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, где появляется возможность выставить отдельные свойства под различную ширину.
/* Для мобильных устройств */
@media only screen and (max-width: 767px) {
body {
/* Если размер экрана меньше 767px показываем уменьшенное изображение,
* которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки
* на мобильных устройствах */
background-image: url(../images/background-photo-mobile-devices.jpg);
}
}
Этот метод считается одним из актуальных по использованию для применение на каждую страницу.
Важно: Также будет представлен архив, что закреплен за материалом.
Демонстрация
