Имеются 3 div'a для вывода контента юзерам: top, bg, bottom (дань IE, который не воспринимает border-radius). Блоки такие:
.content .big_black_block_top{
width: 710px;
height: 8px;
background: url(../img/black710_top.png) no-repeat;
margin: 0 0 0 0;
float: left;
}
.content .big_black_block_bg{
width: 710px;
background: url(../img/black710_bg.png) repeat-y;
border: none;
margin: 0 0 0 0;
float: left;
}
.content .big_black_block_bottom{
width: 710px;
height: 19px;
background: url(../img/black710_bottom.png) no-repeat;
margin: 0 0 0 0;
float: left;
}
Если все 3 картинки разные (как представлено), то никаких проблем нет — оборачиваем контент и все хорошо, НО я озадачился вопросом, как объединить эти картинки в спрайт. С верхним и нижним дивами все хорошо, т.к. их высота задана. Вопрос в том, что делать с главным (средним), ведь в таком виде ему нельзя задавать высоту, поскольку тогда сам блок будет равен 1px, а если просто указать спрайт и задать background-position, то захватится не только нужная часть картинки, но и все, что ниже этой части.
Я понимаю, что можно этот div обернуть в еще один, но можно ли как-то решить эту задачу только стилями, вообще не меняя html разметку самой страницы?
Спасибо за дельные советы.