Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.
Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.
Вот требования к решению:
Заполнять изображением всю страницу без пробелов.
Масштабировать изображение, если нужно.
Сохранять пропорции изображения.
Изображение центрируется на странице.
Изображение не создает никаких полос прокрутки.
Кросс-браузерное решение по возможности.
Не использовать никаких сторонних технологий, например, Flash.
Удивительный, простой и прогрессивный метод CSS3
Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size. Мы используем элемент html (лучше, чем body, так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover.
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;
}
Работает в:
Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)
Firefox 3.6+
Техника с использованием только CSS. Часть #1.
Используем строчный элемент <img>, размеры которого можно менять в любом браузере. Устанавливаем свойство min-height, чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.
Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации процентного значения свойства left и отрицательного значения для левого поля, чтобы центрировать фоновое изображение.
Вот код CSS:
img.bg {
/* Устанавливаем правила для заполнения фоном */
min-height: 100%;
min-width: 1024px;
/* Устанавливаем коэффициент пропорциональности */
width: 100%;
height: auto;
/* Устанавливаем позиционирование */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Работает в:
Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.
IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
IE 9: Работает.
Техника с использованием только CSS. Часть #2.
Другой способ решить задачу - поместить строчный элемент <img> на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height, сохраняя коэффициент пропорциональности.
<img src="images/bg.jpg" id="bg" alt="">
#bg {
position:fixed;
top:0;
left:0;
/* Сохраняем коэффициент пропорциональности */
min-width:100%;
min-height:100%;
}
Однако так изображение не центрируется. Поэтому обернем изображение в элемент <div>. Данный <div> будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#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 (не тестировалось на всех версиях, но в последних работает прекрасно).
IE 8+.
Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).
Используем jQuery
Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент <img> будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.
<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
Работает в:
IE7+ (с заглушками, вероятно, будет работать и в IE6)
Во всех остальных браузерах.