Поиск по сайту

Требуется небольшая помощь дизайнера, код css

 #head {



	width:952px;
	margin-top:77px;
	margin-right:auto;
	margin-left:auto;
	background-image:url(../images/center.png);
	background-repeat:repeat-y;
	background-position:top;
}
#head2 {

	margin-right:auto;
	margin-left:auto;
	background-image:url(../images/bg2.png);
	background-repeat:no -repeat;
	background-position:top;
	width:952px;
}

#top_head {
	width:100%;
} 

#vrh {
	width:952px;
	float:left;
	height:84px;
	margin-bottom:15px;
	text-align:center;
}

Вывожу так

<div id="head">

<div id="head2">

<div id="top_head">
      <div id="vrh">
       текст
</div></div></div></div>

Вся проблема в том, что изображение bg2.png с закруглёнными краями (углы прозрачные), а center.png прямоугольное, резиновое. И есле выводить код как я написал то изображение center.png выводится с самого верху и закруглённые края bg2.png не видно из-за него, как сделать чтобы изображение center.png выводилось на 10...

вопрос номер 1. а зачем столько дивов:

<div id="head"> 
<div id="head2"> 
<div id="top_head"> 
<div id="vrh">

?