Как растянуть фоновую картинку?

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

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

• Базовое знание языков HTML и CSS

Инструкция

Первый вариант основан на более ранних спецификациях языка CSS. Вам нужно создать такую структуру HTML-кода, в которой будут присутствовать два перекрывающихся слоя, размещенных один над другим. Слои (div) можно растягивать на ширину экрана и в старой спецификации языка описания каскадных стилей. В нижний из слоев вам нужно поместить фоновую картинку, а в верхнем будет размещаться весь контент страницы. Такая структура в теле документа может выглядеть так:

Здесь будет содержимое страницы

А в заголовочную часть надо поместить описание стилей для этой структуры. Например, такое:

html, body {

margin: 0px;

height: 100%;

}

#background {

position: absolute;

width: 100%;

height: 100%;

}

#body {

position: absolute;

width: 100%;

height: 100%;

z-index: 2;

}

Здесь слоям с идентификаторами background (это у вас фоновая картинка) и body (это слой для контента страницы) задано абсолютное позиционирование и 100% ширина и высота. Кроме того, слою контента задан порядковый номер z-index = 2. Он определяет «глубину» слоев - чем он больше, тем дальше от «дна» располагается этот лэйер. В нашем случае он будет выше слоя background, который использует значение z-index, заданное по умолчанию.

Весь код в сборе может выглядеть так:

html, body {

margin: 0px;

height: 100%;

}

#background {

position: absolute;

width: 100%;

height: 100%;

}

#body {

position: absolute;

width: 100%;

height: 100%;

z-index: 2;

}

Здесь будет содержимое страницы

Не забудьте заменить имя файла фонового изображения images/fon.png.

Второй вариант будет использовать появившееся в CSS3 свойство background-size. Заодно добавьте в определения стилей аналогичные свойства и раньше использовавшиеся браузерами Mozilla Firefox, Google Chrome и Opera. Блок описания стилей в этом варианте может выглядеть так:

html {

background: url(images/fon.png) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

И здесь не забудьте заменить имя файла фонового изображения images/fon.png. А в самом теле документа никаких специальных конструкций помещать в этом варианте не требуется.

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