Как растянуть фон

Растянуть фон на веб-странице не так-то просто. Здесь поможет маленькая хитрость. Сначала формируются два слоя – для картинки и содержимого страницы. А потом определяется позиционирование каждого из них. Тот слой, что с картинкой, растягивается до 100% размеров страницы, а левый верхний угол его назначается нулевой точкой отчета. После слияния слоев страница приобретает совершенно иной вид.

Статьи по теме:

Вам понадобится

Соединение с интернетом, веб-ресурс

Инструкция

Используя тег , сформируйте два слоя - layer1 и layer2. На одном из них, нижнем, будет располагаться картинка, на другом, верхнем, – контент веб-страницы.

Определите порядок расположения слоев посредством стилевого атрибута z-index. Учтите, чем больше будет значение указанного параметра, тем выше окажется имеющийся сейчас в наличии слой по отношению к другим слоям. Задайте абсолютное позиционирование для каждого создаваемого слоя.

Установите для слоя layer1 размеры, равные 100% ширины и высоты. Сделайте координаты левого верхнего угла начальными, нулевыми. Это поможет избавиться от горизонтальной полосы прокрутки.

Выполните слияние слоев.

Видео по теме

Обратите внимание

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

Полезный совет

Увеличивая размер окна используемого браузера, учтите, что фон тоже будет расширяться. Во многих случаях это приводит к ухудшению качества картинки.
При растягивании фона обратите внимание на то, что он должен занимать все пространство страницы. При этом центр изображения необходимо совместить с центром страницы.

Источники: