Фон на всю страницу сайта CSS3

Фоновая картинка на весь экран на CSS 3.0

Как растянуть картинку в HTML? Существует несколько способов растянуть фоновую картинку на всю страницу сайта. Все они отличаются не только реализацией, но и результатом.

Мы рассмотрим как использовать фоновую картинку так, чтобы она была постоянно растянута на весь сайт с помощью CSS 3.0.

Давайте распишем те свойства, какими должен обладать хороший метод:
  • Картинка должна заполнять все пространство без пробелов
  • Растягиваться в случае необходимости
  • Сохранять пропорции изображения
  • Центр изображения должен быть в центре страницы
  • Если изображение большое должны отсутствовать полосы прокрутки
  • Кроссбраузерность (на сегодняшний день уже большинство браузеров поддерживают CSS 3.0)
  • Без использования дополнительных механизмов (javascript, flash)

Мы можем это реализовать на чистом CSS 3.0 благодаря свойству background-size, оно масштабирует изображение согласно заданным размерам.

Синтаксис использования свойства background-size:

background-size: %значение%

Значение может быть следующим:
  • В единицах (px, cm, em и т.д.)
  • В процентах (задает размер картинки от высоты или ширины элемента)
  • auto (Если задано высота и ширина как auto auto, то размеры фона остаются исходными). Если указать например 250px auto, то размеры высчитаются исходя из пропорций картинки
  • cover (пропорциональное растягивание, при этом картинка растянется на весь блок)
  • contain (пропорциональное растягивание, при этом картинка растянется так, чтобы полностью вместиться в блок)
Можно указывать как одно, так и два значения. Если указано одно значение (ширина), то второе будет auto (ширина).

Свойство изучили, требования выставили теперь смотрим код:


html {
       background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


Данное решение работает в следующих браузерах:
  • Safari 3+
  • Chrome любой версии
  • IE 9+
  • Opera 10+ (Opera 9.5 с пользовательским свойством через -o-)
  • Firefox 3.6+ (Firefox 4 поддерживает свойство без префикса)
Такой метод визуально подходит лучше всего при растягивании картинки на весь фон сайта.
  • avatar
  • .
  • +29

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.