В отличие от обычной картинки, добавляемой через тег <IMG>, фоновый рисунок напрямую никак не получится растянуть. Но можно пойти на хитрость и расположить картинку в качестве нижнего слоя, а остальное содержимое веб-страницы поместить поверх него. Для этого создаем с помощью тега <DIV> два слоя, назовем их layer1 и layer2 и определим их порядок через стилевой атрибут z-index. Чем больше значение этого параметра, тем выше располагается текущий слой относительно других слоев. Также необходимо задать абсолютное позиционирование для каждого слоя (пример 1).
Пример. Растягиваемый фон
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Растягиваемый фон</title>
<style type="text/css">
#layer1 {
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
}
#layer2 {
position: absolute; /* Абсолютное позиционирование */
z-index: 2; /* Порядок слоев */
}
</style>
</head>
<body>
<div id="layer1">
<img src="help.gif" width="100%" alt="">
</div>
<div id="layer2">
Основное содержимое веб-страницы
</div>
</body>
</html>
Для слоя layer1 требуется установить ширину и высоту равную 100% и координаты левого верхнего угла задать нулевыми. Тогда не возникнет горизонтальной полосы прокрутки. Обратите внимание, что в самом теге <IMG> указана только ширина изображение без высоты. Это сделано для того, чтобы сохранить пропорции картинки, в противном случае в браузере Opera возникнут искажения.
Результат данного примера показан на рис. 1.
