Форум Сайтостроение Веб-строительство

Бэкграунд, состоящий из трёх частей. Сложная задача.

28
На сайте с 31.10.2009
Offline
116
2038
756

Встала передо мной нетривиальная задача: сделать бэкграунд, состоящий из трёх частей: длинный лист бумаги, с затемнёнными уголками (старая бумага) сверху и снизу. Таким образом, у нас есть верхняя часть с уголками, центр (который растягивается) и низ с уголками.

Какая проблема? Вот пример:

www . westernhorse . ru

Бэкграунд - не однопиксельная полоска. Это большая картинка. Вы видите, что посреди текста много-много раз эта "горелая часть" повторяется. А надо, чтобы она была только вверху и внизу.

Можно предложить сделать бумагу без горелых частей. А "горелость" добавить отдельными слоями.

Нижнюю "горелость" можно сделать через position:relative с помощью opacity, либо полупрозрачной gif-картинки. Делаем top:-50px; height:50px; и картинка заполняет 50 пикселей над собой.

Однако, как сделать верхнюю "горелость"? Абсолютное позиционирование не подойдёт, ведь панель навигации может быть в две строки. Есть расположить в верхней части текста слой с position:relative, он отодвинет текст вниз на величину собственной высоты (в отличие от нижней горелости, которая заполняет текст над собой с помощью всё того же position:relative).

Надеюсь, я понятно объяснил проблему. Очень жду ваших советов, либо ссылок на готовые мануалы.

Борец за чистоту Интернета.
K
На сайте с 28.12.2008
Offline
61
kud
#1

Попробуйте сделать так: 

<div id ="container">

    <div id="top"></div>

     <div id = "background-repeat-y">

           <div id = "text" style="margin-top:-50px">

           </div>

      </div>

 

     <div id ="bottom"></div>



</div>
28
На сайте с 31.10.2009
Offline
116
2038
#2
kud:
Попробуйте сделать так: 

<div id ="container">

    <div id="top"></div>

     <div id = "background-repeat-y">

           <div id = "text" style="margin-top:-50px">

           </div>

      </div>

 

     <div id ="bottom"></div>



</div>

Действительно, попробую. Спасибо. =)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий