Эффект двойного фонового изображения
Решение состоит в использовании 2-х изображений, которые повторяются
(одно для правой стороны и одно для левой).
HTML
Для повторяющегося изображения слева мы добавим фоновый рисунок к
тегу <body>.
Далее для решения проблемы с правой стороной мы
добавим
дополнительный слой <div>, который будет содержать второе
фоновое
изображение.
<div id="bg_wrap"></div> <!--Right-Side Repeating Background Image-->
<div class="container">
<!-- Container Class to center align and have a fixed width / The image header.gif is just as an example for placement -->
<img src="header.gif" alt="" />
</div>
CSS
body {}
Тут мы задаем фон для левой стороны
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}
#bg_wrap {}
Далее мы создаем вторую половину, добавляя абсолютную позицию, которая
будет прикреплена справа
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}
.container
Этот класс будет контейнером всего содержания. Здесь мы определяем
ширину, цвет фона, выравнивание по центру и позицию 'relative'.
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}
Финальный код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Double Backgrounds with CSS - CSS/XHTML Tutorial by Soh Tanaka</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div id="bg_wrap"></div>
<div class="container">
<img src="header.gif" alt="" />
</div>
</body>
</html>
| 