Создание двойного фонового изображения

В данном уроке я покажу Вам как с помощью CSS создать эффект двойного фонового изображения.

Данный урок был подготовлен американским блоггером www.SohTanaka.com. Оригинал находится здесь.

По просьбе автора исходники были удалены с наших серверов. Демо версия доступна для просмотра на сайте автора.

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

Типичная техника растягивания



Эта часть изображения будет повторяться до полного заполнения страницы.

В нашем же примере нам понадобится фоновое изображение, которое будет повторяться и слева, и справа шапки. Как же достигнуть этого?

Техника двойного фонового изображения



Нам необходимо повторить оба рисунка (слева и справа) для достижения такого эффекта.


К сожалению, текущая версия CSS не способна справиться с двойными фоновыми изображениями. Надеюсь, что в будущем это изменится.

Эффект двойного фонового изображения

Решение состоит в использовании 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>

Вот и все готово! Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sohtanaka.com
Перевел: Максим Шкурупий
Урок создан: 22 Апреля 2009
Просмотров: 47206
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^