Ciao a tutti!!

Il mio problema è sicuro già stato affrontato più volte ma dagli esempi che ho visto in giro
non sono riuscita e venirne fuori..please aiutatemi!!

Ho un immagine come bakground e altre due immagini di sfondo usate come bordo per il testo che è

posto al centro.
Il problema è adattare alla lunghezza delle pagine caricate le due immagini di sfondo usate come bordo (#left_border e #right_border).

Codice
/* CSS Document */

body {
padding: 0;
font-size: 12px;
background: #5f6064;
margin: 0px;
color: #666666;
font-family: Arial, sans-serif;
text-align: center;
line-height: 20px;
}



img {
border: 0;
margin: 0;
line-height: 0;
}

...
body {
background: #FFFFFF url(../images/background.jpg) top center no-repeat;
}

#footer, #footer a {
color:#333333;
cursorointer;
}

#left_border {
background: url(../images/shadow_left.png)repeat-y ;
border: 0;
padding: 0;
margin: 0;
width: 8px;
height: 100px;
float: left;

}

#right_border {
background: url(../images/shadow_right.png) repeat-y;
border: 0;
padding: 0;
margin: 0;
width: 8px;
height: 100px;
float: left;
}

#bottom_border {
background: url(../images/shadow_bottom.png) repeat-y;
width: 976px;
height: 13px;
border: 0;
padding: 0;
margin: 0;
clear: both;
}


Pagina html

..
<body>
<div id=wrapper>
<div id=left_border></div>
<div id=main_holder>
<div id=logo><a href="index.html">
[img]./images/logo.gif[/img]</a></div>
<div id=navigation>
<ul >
..[/list]
</div>

<div id=main_content>
<h1>titolo</h1>
<div id=content>



testo testo </p>

</div>
</div>
</div>



<div id=right_border></div>
<div id=bottom_border></div>
<div id=footer> ..</div>

</div>

</body>



in sostanza queste immagini shadow_right.png e shadow_left.png non si ripetono in verticale nemmeno se nel css metto height: auto;

Qualcuno mi può aiutare, intanto grazie mille!!!