Как растянуть фон на всю ширину окна браузера?

🕛 23.01.2009, 00:15
В отличие от обычной картинки, добавляемой через тег <IMG>, фоновый рисунок напрямую никак не получится растянуть. Но можно пойти на хитрость и расположить картинку в качестве нижнего слоя, а остальное содержимое веб-страницы поместить поверх него. 
Для этого создаем с помощью тега <DIV> два слоя, назовем их layer1 и layer2 и определим их порядок через стилевой атрибут z-index. Чем больше значение этого атрибута, тем выше располагается текущий слой относительно других слоев. Также необходимо задать абсолютное позиционирование для каждого слоя (пример 1).

Пример 1. Растягиваемый фон

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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="images/help.png" width="100%" alt=""> </div> <div id="layer2"> Основное содержимое веб-страницы </div> </body>
</html>Для слоя layer1 требуется установить ширину и высоту равную 100% и координаты левого верхнего угла задать нулевыми. Тогда не возникнет горизонтальной полосы прокрутки. Обратите внимание, что в самом теге <IMG> указана только ширина изображение без высоты. Это сделано для того, чтобы сохранить пропорции картинки, в противном случае в браузере возникнут искажения.