Рубрика CSS
Создание двойного фонового эффекта с помощью CSS
Обычно при создании эффекта растягиваемого фона с помощью CSS, мы используем изображение фиксированного размера и повторяем его по оси Х, пока не заполнится вся страница. Конечно, для того чтобы достигнуть такого результата, верхняя часть сайта (header) должна быть центрирована, а края должны сливаться с фоновым изображением по обе стороны.
Типичная техника растягивания
В нашем случае нам необходимо, чтобы изображение повторялось с двух сторон. Как же достичь такого эффекта?
Техника двойного фонового растягивания
Так как текущая версия CSS не поддерживает работу с двойными фоновыми изображениями, надеемся, что в будущем эта проблема будет решена.
Двойной фоновый эффект
Решение состоит в том, чтобы использовать два повторяющихся изображения, одно для фона с левой стороны, а другое для фона с правой стороны.
HTML
Для повторяющегося изображения с левой стороны мы добавим фон к тэгу <body>. Для размещения повторяющегося изображения с правой стороны, мы добавим дополнительный тег <div>, который будет содержать второе фоновое изображение.
<div id="bg_wrap"></div> <!--Right-Side Repeating Background Image-->
<div> <!-- 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=iso-8859-1" />
<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>
<img src="header.gif" alt="" />
</div>
</body>
</html>Вот и все! 
Автор:
Добавлено:15.02.2010 18:27
Бэк боди всегда пригодится как резерв мало ли где еще понадобитя, так что в таком случае ИМХО птимальный вариант это таблица 1 строка 3 колоник и все никаких проблем вообще.
или подпихнуть под центральный див с контентом через з-индек див с двумя внутри по 50% ширины с разными бэками и все.