Как сделать background-size для всех браузеров

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 */
}

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 */

}