Ho un problema strutturale :

Questo è il codice HTML :

codice:
<div id="involucro"> 
    <div id="intestazione"> 
        <div id="intestazione-dx"> 
            <div id="logo">SITO</div> 
        </div>
    </div> 
</div>
Questo invece il CSS :

codice:
/* CSS for Forum */
body
{
	background: #aa602b url(img/background2.jpg) no-repeat center top;
	margin: 0px;
	padding: 0px;
	font-size:70%;
	font-family : Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
}

/* INVOLUCRO FORUM*/
#involucro {
	padding:0 0 0 0;
	margin:0px auto;
	width:80%;
	text-align:left;
}

/* INTESTAZIONE*/

#intestazione {
	background:  url(img/head.png) repeat-x top;


}
#intestazione-dx{
	background: url(img/head_right.png) no-repeat top right;
}
#logo a {
	margin: 0;
	padding: 0;
	background: transparent url(img/logo.png) no-repeat left top;
	display:block;
	text-decoration: none;
	padding: 207px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:207px; /* for IE5/Win only */
}
Il problema è che le immagini logo.png e head_right.png ai loro lati rispettivamente sinistro e destro sono trasparenti..Per questo si vede l'immagine di sfondo head.png . Essendo un layout liquido, quest'ultima dovrà per forza ripetersi. Quindi, come si potrebbe rimediare ? Altrimenti c'è un modo per far ripetere un'immagine fino ad una certa posizione o comunque per tot numero di pixel ?? GRAZIE !!