Имеются 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 разметку самой страницы?

Спасибо за дельные советы.