Главная » Статьи » Статьи по CSS

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

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

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


Код
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 */
}


Источник: http://ucozmaster.ru/publ/css/puleneprobivaemyj_background_size/5-1-0-45
Категория: Статьи по CSS | Добавил: SibDes (08.02.2013)
| Автор: Денис
Просмотров: 865 | Теги: css, Фон, изображение, background-size | Рейтинг: 5.0/2
X
Ссылка:
BB-код:
HTML-код:

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