Полное заполнение фона страницы

Итак, нам надо что-бы одно фоновое изображение на сайте всегда заполняло собой всё окно браузера. (без повторов, только одно изображение, одно!)
Прикинем что нам надо:

• Заполняет всю страницу изображением, без пробелов
• Изменяет изображения по мере необходимости
• Сохраняет пропорции изображения (соотношение сторон)
• Изображение по центру страницы
• Не вызывает полос прокрутки
• Кросс-браузерность

Способ с использованием CSS3

PHP:


html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}


Для работы во всех текущих версиях IE можно включить IEFilter -

PHP:


filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";


Работает в:

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+ (Opera 9.5 supported background-size but not the keywords)
• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

DEMO

Способ с использованием только CSS

PHP:


img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}


Работает в:

• Все нормальные браузеры: Safari / Chrome / Opera / Firefox
• IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
• IE 7/8: в основном работает, проблемы с малым изображением
• IE 9: работает

DEMO

Способ №2 с использованием только CSS

PHP:


<img src="images/bg.jpg" id="bg" alt="">


PHP:


#bg {
        position:fixed;
        top:0;
        left:0; 

        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
}


Однако, это не центр изображения ... Таким образом, мы можем зафиксировать, заключив изображения в див. Этот DIV мы сделаем в два раза больше окна браузера.

PHP:


<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

PHP:


#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}


Работает в:

• Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)
• IE 8+
• Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

DEMO

Ещё есть метод на jQuery, но он не вписывается в данный раздел =)