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

Язык разметки HTML позволяет веб-дизайнеру использовать в качестве фонового рисунка любое изображение. Однако в самом языке недостаточно встроенных средств управления фоновыми картинками. Более тонкая настройка осуществляется при помощи каскадных таблиц стилей CSS.
Создать сайт самостоятельно с Wix.com

Инструкция

Чтобы сделать фон, растягиваемый на всю ширину браузера, необходимо воспользоваться параметром z-index в CSS. Он позволяет задать порядок создаваемым элементам. Чем больше значение данного атрибута, тем выше блок будет располагаться на странице.

Создайте новые документы в формате html и css (правая клавиша мыши – «Создать» - «Текстовый файл») и откройте их при помощи любого текстового редактора.

Расположите фоновую картинку на нижнем слое. Она будет растягиваться в зависимости от разрешения экрана. Сверху будет расположен другой элемент, на котором будет отображаться содержимое страницы. Чтобы это осуществить, создайте два блока . В файле css напишите:.1layer { z-index: 1;width: 100%height: 100%position: absolute;}.2layer {Position: absolute;z-index: 2; }Параметр position: absolute позволяет задать абсолютное позиционирование, т.е. слой будет размещаться вне зависимости от других элементов.

Включите созданный CSS-код в HTML-файл при помощи связующего тега link:Фон страницы

Создайте новый слой. При помощи тега поместите на него картинку. Например: Содержимое страницы Для img задается только параметр ширины, поскольку если указать дополнительно height, в некоторых браузерах появится искажение изображения.

Сохраните внесенные изменения. Чтобы проверить написанный код, увеличьте страницу в окне браузера. Фоновый рисунок должен тоже увеличиваться.

Оцените статью!