Адаптивная фоновая картинка средствами CSS

Адаптивная фоновая картинка средствами CSS

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

Концепт

Использование свойства backgroud-size для растяжения картинки

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

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

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

Почему-же предоставление уменьшенной картинки для мобильников это хорошая идея? Изображение, которое мы будем использовать для примера очень огромное (5500x3600px). Картинка с таким разрешением будет одинаково хорошо выглядеть при растяжении на многих современных мониторах. Но этот файл весит 1.7 мб. Как вы наверное уже знаете на мобильных устройствах скорость интернета обычно оставляет желать лучшего.

HTML разметка

HTML-разметка обычная, всё, что вам нужно это:

<!doctype html>
<html>
<body>
    <!-- ...Ваш контент... -->
</body>
</html>

Мы собираемся присвоить фоновое изображение к элементу body, поэтому для нас не имеет значения какая HTML разметка на странице. Но имейте в виду, что эта техника сработает и на блочных элементах (таких как div или form).

CSS

Теперь нам осталось только объявить CSS-правила для элемента body:

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-size: cover;

Это именно то место, где происходит магия. Этот параметр/значение говорит браузеру масштабировать фоновое изображение пропорционально.

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

Если размер фоновой картинки меньше чем у элемента body

Когда изображение масштабируется на значение, которое выше оригинального, качество изображение ухудшается.

Имейте это в виду при выборе изображения для фона страницы.

Давайте продолжим дальше. Для того чтобы картинка всегда была по центру, мы объявили правило:

background-position: center center;

Следующим делом мы должны решить проблему, которая появляется когда высота блока с контентом больше чем высота экрана. Когда это происходит появляется полоса прокрутки.

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

background-attachment: fixed;

Сокрашенный вариант обозначении CSS-правил

body {
  background: url(background-photo.jpg) center center cover no-repeat fixed;
}

Медиа запросы для маленьких экранов

Для маленьких экранов вы можете пропорционально уменьшить размер оригинального изображения через Photoshop или Gimp.

@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

<a href="http://cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html" class="button-c pure-button">Демо</a>

original