problemi duplicazione immagine di sfondo

[Zea]

Ciao a tutti, sto facendo delle prove per capire un pò come funzionano i css
ma ho un problema con uno sfondo che non si ripete correttamente.
Quando tengo la pagina tutta aperta nessun problema, lo sfondo si ripete
in verticale per tutta la pagina ma, quando restringo la pagina e vado verso
il basso utilizzando lo scroll laterale ecco che lo sfondo non si ripete, come posso
correggere l'errore?
Vi metto qui di seguito il codice html


#sx {
background-image: url(immagini/provasfondo2.png);
background-repeat: repeat-y;
background-size: contain;

margin: 0 auto;
padding: 0;
float:left;
width: 20%;
height: 100%;
text-align: center;



}


#centro {
background-color: #F8F4FF;
float:left;
width: 60%;
height:100%;
text-align: center;

}

#dx {
background-image: url(immagini/provasfondo2dx.png);
background-repeat: repeat-y;
background-position: right top;
background-size: contain;
margin: 0 auto;

float:right;
width: 20%;
height: 100%;
text-align: center;

}

 

[Max 1]

È colpa di background-size: contain che non lascia coprire interamente l'area toglilo!

 

[Zea]

Tolto ma da sempre lo stesso problema... e togliendolo lo sfondo non si ridimensiona in base alla dimensione

 

[Zea]

Ho trovato il colpevole: è colpa del "height: 100%;" nel div "sx" e "dx"
Mettendolo al 100% quando restringo la finestra il "100%" si restringe, quindi
duplica lo sfondo solo per la grandezza della finestra ed anche se si usa
la barra laterale per guardare in giù non si muove.
La soluzione sarebbe quella di impostare la lunghezza del div pari alla lunghezza della
definizione del video.
So che il problema è questo perchè ho messo i tre div in un contenitore con grandezza
che prende tutta la risoluzione del mio schermo e a questo punto, lasciando la lunghezza al 100% non
da più nessun problema in quando il contenitore ha una lunghezza espressa in px ed il valore height: 100%; corrisponde
esattamente a quella misura. ... Sono stata contorta nella spiegazione?
Ora il problema è: come si fa?