Как растянуть фоновую картинку
Возможность растягивать фоновую картинку на всю ширину окна браузера средствами только языка CSS появилась с выходом его последней спецификации — CSS3. К сожалению, пока большое количество веб-серферов использует браузеры ранних версий, не понимающих спецификации CSS3. Поэтому приходится делать выбор — либо использовать менее удобное, но кроссбраузерное решение, либо высокотехнологичное, но для ограниченной аудитории. Рассмотрим оба варианта.
Статьи по теме:
- Как растянуть фоновую картинку
- Как сделать картинку рабочего стола
- Как изменить фоновую картинку
Вам понадобится
- Базовое знание языков HTML и CSS
Инструкция
Первый вариант основан на более ранних спецификациях языка CSS. Вам нужно создать такую структуру HTML-кода, в которой будут присутствовать два перекрывающихся слоя, размещенных один над другим. Слои (div) можно растягивать на ширину экрана и в старой спецификации языка описания каскадных стилей. В нижний из слоев вам нужно поместить фоновую картинку, а в верхнем будет размещаться весь контент страницы. Такая структура в теле документа может выглядеть так:
А в заголовочную часть надо поместить описание стилей для этой структуры. Например, такое:
Здесь слоям с идентификаторами background (это у вас фоновая картинка) и body (это слой для контента страницы) задано абсолютное позиционирование и 100% ширина и высота. Кроме того, слою контента задан порядковый номер z-index = 2. Он определяет «глубину» слоев — чем он больше, тем дальше от «дна» располагается этот лэйер. В нашем случае он будет выше слоя background, который использует значение z-index, заданное по умолчанию.
Весь код в сборе может выглядеть так:
Не забудьте заменить имя файла фонового изображения fon.png.
Второй вариант будет использовать появившееся в CSS3 свойство background-size. Заодно добавьте в определения стилей аналогичные свойства и раньше использовавшиеся браузерами Mozilla Firefox, Google Chrome и Opera. Блок описания стилей в этом варианте может выглядеть так:
И здесь не забудьте заменить имя файла фонового изображения fon.png. А в самом теле документа никаких специальных конструкций помещать в этом варианте не требуется.