ragazzi ho questo problemuccio

in un div c'è un'immagine in background che si ripete in orizzontare
ora l'immagine si ripete per le risoluzioni 800x600 1024x768 ecc
nel momento in cui ridimensiono la finestra del browser (la faccio + piccola di 800x600)
l'immagine non si ripete per tutta la lunghezza ma fino ad un certo punto

posto il codice

codice:
<div id="container">
<div id="header">
<div id="logo">[img]../img/logo_orariovoli.gif[/img]</div>
<div id="hcent">
0123456789
</div>
<div id="hdx">[img]../img/hdx.gif[/img]</div>
</div>
</div>

<div id="navigation">

<ul>[*][img]1.gif[/img]
[*][img]2.gif[/img]
[*][img]2.gif[/img]
[*][img]2.gif[/img]
[*][img]3.gif[/img]
[*][img]4.gif[/img][/list]
</div>



codice:
html, body{
width: 100%;
height: 100%;
margin:0px;
padding:0px;
}

body{
background-image: url(img/bg.gif);
background-position:center center; 
background-repeat:repeat-y;
background-color:#ffffff;
margin:auto;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000000;
padding:0px;
width:100%;
border:0px;
}


div#container{
position:relative;
width: 100%; 
height: auto;
margin: 0 auto;
border: 0px;
padding:0px;
text-align:center;
background-color: red;
}

body>div#container{
height:auto;
min-height:76px;
}

div#header{
width:750px;
margin:auto;
padding:0px;
border:0px;
height:76px;
text-align:center;
vertical-align:bottom;
background-color:#c0c0c0;
}

div#logo{
width:159px;
float:left;
height:76px;
margin:0px;
padding:0px;
border:0px;
}

div#hcent{
width:564px;
float:left;
height:76px;
color:#000000;
background-color:#c0c0c0;
margin:0px;
padding:0px;
border:0px;
}

div#hdx{
width:27px;
float:right;
height:76px;
margin:0px;
padding:0px;
border:0px;
}

#navigation{
position: relative;
top:0px;
left:0px;
background-image: url(img/bgmenu.gif);
background-repeat:repeat-x;
margin:0px auto;
padding:0px;
border:0px;
height:30px;
display:block;
width:100%;
text-align:center;
}

posto l'immagine per capire meglio




aiuto