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

2 ноября 2014 г. Просмотров: 407 Инструкции
Язык разметки 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, в некоторых браузерах появится искажение изображения.
  • Сохраните внесенные изменения. Чтобы проверить написанный код, увеличьте страницу в окне браузера. Фоновый рисунок должен тоже увеличиваться.
  • Оцените статью!