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

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

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


Ниже следует CSS код подобного адаптиного фонового изображения для тега <body> - background.png:

body {
background-image: url(../images/background.png);
/* путь к изображению */
background-repeat: no-repeat;
/* запрет повтора изображения */
background-position: center center;
/* размещаем изображение по центру */
background-attachment: fixed;
/* фиксируем позицию изображения */
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* изображение будет масштабироваться до размеров экрана */
}

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

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

@media only screen and (max-width: 640px) {
body {
background-image: url(../images/background-mob.png);
}
}

Ну и конечно уменьшив все изображения, например сервисом tinypng.com
Удачи!


sbird    Уроки    867

Комментарии отсутствуют

Добавление комментариев доступно только зарегистрированным пользователям