Пуленепробиваемый background-size

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

Собрав в кучу CSS2, CSS3, фильтры для IE и специфические вендорные префиксы для разных браузеров, получаем почти кроссбраузерное решение поставленной задачи.

Code

html, body {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
body {
  background-attachment: fixed;
  background-image: url('images/body_bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  -o-background-size: 100% 100%; /* opera ≥ 9.5 */
  -webkit-background-size: 100% 100%; /* Safari ≥ 5.0, Chrome ≥ 4.0 */
  -khtml-background-size: 100% 100%; /* Konqueror ≥ 3.5.4 */
  -moz-background-size: 100% 100%; /* Firefox ≥ 3.6 */
  background-size: 100% 100%; /* браузеры с поддержкой CSS3: FF ≥ 4, Opera ≥ 10.53, IE ≥ 9.0 */
}
/* Через условные комментарии или хаки пишем стили для IE */
* html body {
  /* IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/google-chrome.jpg',sizingMethod='scale')";
  /* IE < 8 */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/body_bg.jpg', sizingMethod='scale');
  background-image: none; /* IE ≤ 9.0 */
}

Ваша оценка:

Рейтинг: 5 Всего:711 Добавил: Михалыч

« Назад

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:

Комментарии

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]