Время для прочтения: 1 мин. 35 сек.

Пуленепробиваемый 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 */
}

Поддержка браузерами

ПоддержкаChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Konqueror
Базовая1.0 — webkit3.6 (1.9.2) — moz9.09.5 — o3.0 (522) — webkit3.5.4
3.04.0 (2.0)10.04.1 (532)
Для
contain и cover
3.03.6 (1.9.2)9.010.04.1 (532)
Для SVG backgrounds8.0 (8.0)

Не применяйте фильтры для тега <html> — это приведет ко множеству проблем.

RTFM

Ссылки

Пошерить
Запинить
Отправить
Вотсап

Смотрите также

Предыдущая запись
Следующая запись

Комментарии