Проблема с построением фона

[Seganda]

Всем привет!

Делаю вид новостей, столкнулся с проблемой.....

такая структурка:

<div style="margin-bottom:10px;">
<div style="width: 705px;height: 30px;background-image: url(http://s017.radikal.ru/i441/1301/fd/e6675f8585aa.png);background-repeat: no-repeat;"></div>

<div style="width: 675px;background-image: url(http://s018.radikal.ru/i510/1301/c5/306147fcb3b6.png);background-repeat: repeat-y;padding:0px 15px 0px 15px;color:#383838;">
Название новости<br>
<img src="#" width="200px" height="124" align="left" />
<div style=" float: left; width:460px; padding-left:5px;">Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш </div>
<div style="clear: both;"></div>
</div>

<div style="width: 705px;height: 30px;background-image: url(http://s020.radikal.ru/i704/1301/6e/6f64ab9f4039.png);background-repeat: no-repeat;"></div>
</div>

проблема в том, что из за прибамбасов с фоном (верхних и нижних) там много свободного места, а хотелось, что бы там тоже был контент, что бы контент был не просто в среднем диве, а он вообще небыл зависим от дивов, что бы я мог контент и под верхний беграунд затащить

[Seganda]

выше

[alex_anderr]

Никто не хочет помогать, потому что никто не может прочитать код и представить что это такое.

И никто не хочет приводить все к такому виду:

#container {
margin-bottom:10px;
}
#one {
width: 705px;
height: 30px;
background-image: url(http://s017.radikal.ru/i441/1301/fd/e6675f8585aa.png);
background-repeat: no-repeat;
}
#two {
width: 675px;
background-image: url(http://s018.radikal.ru/i510/1301/c5/306147fcb3b6.png);
background-repeat: repeat-y;
padding:0px 15px 0px 15px;
color:#383838;
}
#two2 {
float: left;
width:460px;
padding-left:5px;
}
.clear {
clear: both;
}
#three {
width: 705px;
height: 30px;
background-image: url(http://s020.radikal.ru/i704/1301/6e/6f64ab9f4039.png);
background-repeat: no-repeat;
}

<div id='container'>
<div id='one'>
</div>

<div id='two'>
Название новости<br>
<img src="#" width="200" height="124" align="left" />
<div id='two2'>
Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш Пыш
</div>
<div class='clear'></div>
</div>

<div id='three'>
</div>
</div>

Но даже так не понятен смысл действий. Получается, что нужно распределить один контент по трем фонам? И даже если это имеет эстетический смысл, то делается примерно так:

1. Все остается как есть.

2. Див с контентом получает абсолютное позиционирование относительно дива container и возможно z-index

Но при таком подходе смысл блочной верстки теряется.

Я бы при такой задаче сделал бы вроде этого:

<div id='container'>
<img src='#' />
<div id='img2'></div>
<img src='#' />
<div id='content'>Контент</div>
</div>

#container {width:800px; height:1000px; position:relative;}
#img2 {background:URL(...); height:675px; background-repeat: repeat-y;}
#content {position:absolute; top:50px; left: 20px; width: 600px;}

Edited January 21, 2013 by alex_anderr