Содержание
скрыть
Задача масштабирования фонового изображения согласно заданным размерам довольно часто встречается на практике. Например, растянуть фоновую картинку на все окно браузера.
Собрав в кучу 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 */
}
Поддержка браузерами
| Поддержка | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | Konqueror |
|---|---|---|---|---|---|---|
| Базовая | 1.0 — webkit | 3.6 (1.9.2) — moz | 9.0 | 9.5 — o | 3.0 (522) — webkit | 3.5.4 |
| 3.0 | 4.0 (2.0) | 10.0 | 4.1 (532) | |||
| Для contain и cover |
3.0 | 3.6 (1.9.2) | 9.0 | 10.0 | 4.1 (532) | — |
| Для SVG backgrounds | — | 8.0 (8.0) | — | — | — | — |
Не применяйте фильтры для тега <html> — это приведет ко множеству проблем.
RTFM
- background-size
- -o-background-size
- -webkit-background-size
- -moz-background-size
- Specify the size of background images
Ссылки
Источник: https://www.kobzarev.com/makeup/boilerplate-background-size/
