Главная/ Собираем HTML и CSS приемы/ Веб без flash/ Простые примеры с css/ Масштабируемый фон

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

Дата публикации: 19.08.2010

Последнее обновление: 17.11.2010

Задача

Сделать масштабируемый фон без использования 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");
}

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

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

Недостатки

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

Почему не SVG

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

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

А если не для body

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

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

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

Вывод

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

Материалы

Теги: , , ,
Показать комментарии