Подгоняем фоновое изображение к размеру окна браузера

21 сентября 2011

Проблема: необходимо установить размер фонового изображения аналогичным размеру окна браузера, кроссбраузерно.

Решение: использовать background-size (CSS3), все браузеры включая IE до версии 9 поддерживают это свойство и только в IE6/7/8 надо использовать  IEFilter 'AlphaImageLoader'.

Ну и собственно код который необходимо поместить в style.css шаблона:

body {
background: url(../images/bg.jpg) center center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";
overflow: auto;
}

Url к фоновой картинке url(../images/bg.jpg) замените на свой.

Поделиться: Добавить в Facebook Добавить в Вконтакте Добавить в ЖЖ Добавить в Twitter