Масштабируемый фон

Автор: Евгений Рыжков Дата публикации:

Задача

Сделать масштабируемый фон без использования flash.

Почему для этой задачи часто применяется flash

Flash cнабжен возможностями соблюдения пропорций изображения при масштабировании.

В HTML и CSS такое сделать тоже просто, но не так очевидно.

Решение

Т.к. background-size пока не всеми распространенными браузерами поддерживается, приходится это свойство воспроизводить в ручную:

<body>
<div id="page-background"><img src="path-to/alps.jpg" width="100%" alt="Альпы" /></div>
<div class="main">
[содержимое сайта]
</div>
</body>

#page-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.main {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

Для IE6 добавляем эмуляцию position: fixed:

body {
    background:url(about:blank);
    background-attachment: fixed;
}
#page-background {
	position:absolute;
	top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
}

Демо пример. Проверено:

IE 6-8
Firefox 3.6
Opera 9.5 - 10.5
Safari 4
Chrome 4

Прием основан на понятии из CSS спецификаций replaced element. На такие элементы распространяются особые правила расчета размеров. Для нашего случая действует следующие: если для элемента указан только один размер, второй рассчитывается автоматически с соблюдением пропорций.

Недостатки

снижается производительность браузера (у flash с этим тоже не все хорошо, а скорей всего даже хуже);
чтобы не терялось качество при больших разрешениях экрана (не забываем, что изображение растровое), картинку нужно использовать с максимальными размерами. А такие картинки могут весить очень много (например, в демонстрационном примере фоновая картинка весит более 500Kb).

Почему не SVG

Вообще для масштабирования следует применять векторную графику (где графика описывается формулами), а не растровую. Для фото изображений векторная не подходит:

описание фото в формулах имеет огромный вес, зачастую такое описание весит больше самой фото в формате .jpg;
такое длинное описание слишком нагружает браузеры, иногда вызывает даже их падение;
преобразование фото из растрового изображения в векторное сопровождается потерей качества.

А если не для body

Такой фон можно использовать не только для <body>, но и внутри любого элемента. К тому же, не важно каким способом позиционируется картинка, главное чтобы сохранялся принцип авторесайза.

Хочу на всю область страницы

Если следует растянуть фон на всю страницу, тогда <img> добавляем height: 100%. Но тогда пропорции изображения сохраняться не будут.

Вывод

Если дизайнер задумал такое оформление, реализовать его можно. Но нужно не забывать, что очень красочно изображение с высокой детализацией может весить неоправданно много.

Материалы

Сергей Чикуёнок :: Ответы
How To: Resizeable Background Image

Xiper