Тройной фон на информационном DIV'е (реализация)

Дата публикации: 18.12.2007
Категория: Разное

В работе над новым проектом весь вечер вчера не мог решить одну интересную, своеобразную и действительно актуальную проблему – как прикрутить в одному диву фон, состоящий из трёх jpg-картинок. Притом не прочто прикрутить, а прикрутить по-особенному. В общем, поехали:
Имеется некий <div id="info">, в котором располагается непосредственно информационная часть сайта (имею в виду тексты статей итд). За фон к этому div‘у должно отвечать три файла. info1.jpg – верхняя часть рисунка (должна отображаться 1 раз без повторов – top no-repeat), info3.jpg – нижняя часть рисунка (также должна отображаться 1 раз без повторов – top no-repeat), info2.jpg – промежуточная часть рисунка, которая должна заполнять множество раз пространство между рисунками верхним и нижним (при условии, что будет превышена минимальная высота min-height, равная сумме высот верхнего и нижнего рисунка, repeat-y).
Как сделать реализацию проблемы для двух файлов (info1.jpg+info2.jpg) сообразил моментально. Как для трёх – не мог понять. Но в конце концов дошло. Для интересующихся выкладываю обе реализации.

Реализация для двух файлов:

Код страницы шаблона:
<div id="main"> <div id="info"> </div> </div>

Код CSS:
div#main { background: url(info2.jpg) repeat-y; margin: auto; width: 800px; } div#info { min-height: 797px; background: url(info1.jpg) no-repeat top; margin: auto; width: 740px; padding: 0px 30px; }

Реализация для трёх файлов:

Код страницы шаблона:
<div id="main"> <div id="main2"> <div id="info"> </div> </div> </div>

Код CSS:
div#main { background: url(info2.jpg) repeat-y; margin: auto; width: 800px; } div#main2 { background: url(info3.jpg) no-repeat bottom; margin: auto; width: 800px; } div#info { min-height: 797px; background: url(info1.jpg) no-repeat top; margin: auto; width: 740px; padding: 0px 30px; }

То есть для трёх файлов нужно было всего лишь добавить ещё один “обрамляющий” DIV. На первый взгляд, решение проблемы кажется слишком громоздким и неудобным. Но на деле оказывается, что данный вариант является самым оптимальным.


---

|