Вам понадобится
  • Базовое знание языков HTML и CSS
Инструкция
1
Первый вариант основан на более ранних спецификациях языка CSS. Вам нужно создать такую структуру HTML-кода, в которой будут присутствовать два перекрывающихся слоя, размещенных один над другим. Слои (div) можно растягивать на ширину экрана и в старой спецификации языка описания каскадных стилей. В нижний из слоев вам нужно поместить фоновую картинку, а в верхнем будет размещаться весь контент страницы. Такая структура в теле документа может выглядеть так:<img id="background" src="fon.png" />
<div id="body">
Здесь будет содержимое страницы
</div>А в заголовочную часть надо поместить описание стилей для этой структуры. Например, такое:<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
</style>Здесь слоям с идентификаторами background (это у вас фоновая картинка) и body (это слой для контента страницы) задано абсолютное позиционирование и 100% ширина и высота. Кроме того, слою контента задан порядковый номер z-index = 2. Он определяет «глубину» слоев - чем он больше, тем дальше от «дна» располагается этот лэйер. В нашем случае он будет выше слоя background, который использует значение z-index, заданное по умолчанию.
2
Весь код в сборе может выглядеть так:
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
</style>
</head>
<body>
<img id="background" src="fon.png" />
<div id="body">
Здесь будет содержимое страницы
</div>
</body>
</html>Не забудьте заменить имя файла фонового изображения fon.png.
3
Второй вариант будет использовать появившееся в CSS3 свойство background-size. Заодно добавьте в определения стилей аналогичные свойства и раньше использовавшиеся браузерами Mozilla Firefox, Google Chrome и Opera. Блок описания стилей в этом варианте может выглядеть так:<style type="text/css">
html {
background: url(fon.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>И здесь не забудьте заменить имя файла фонового изображения fon.png. А в самом теле документа никаких специальных конструкций помещать в этом варианте не требуется.