Инструкция
1
Чтобы сделать фон, растягиваемый на всю ширину браузера, необходимо воспользоваться параметром z-index в CSS. Он позволяет задать порядок создаваемым элементам. Чем больше значение данного атрибута, тем выше блок будет располагаться на странице.
2
Создайте новые документы в формате html и css (правая клавиша мыши – «Создать» - «Текстовый файл») и откройте их при помощи любого текстового редактора.
3
Расположите фоновую картинку на нижнем слое. Она будет растягиваться в зависимости от разрешения экрана. Сверху будет расположен другой элемент, на котором будет отображаться содержимое страницы. Чтобы это осуществить, создайте два блока <div> . В файле css напишите:.1layer { z-index: 1;width: 100%height: 100%position: absolute;}.2layer {Position: absolute;z-index: 2; }Параметр position: absolute позволяет задать абсолютное позиционирование, т.е. слой будет размещаться вне зависимости от других элементов.
4
Включите созданный CSS-код в HTML-файл при помощи связующего тега link:<html><head><title>Фон страницы</title><link rel=”stylesheet” type=”text/css” href=”файл.css”></head>
5
Создайте новый слой. При помощи тега <img> поместите на него картинку. Например:<body><div class=”1layer”><img src=”файл картинки” width=”100%”></div><div class=”2layer”>Содержимое страницы</div></body></html>Для img задается только параметр ширины, поскольку если указать дополнительно height, в некоторых браузерах появится искажение изображения.
6
Сохраните внесенные изменения. Чтобы проверить написанный код, увеличьте страницу в окне браузера. Фоновый рисунок должен тоже увеличиваться.