Ho un layout ad una colonna che può svilupparsi oltre l'altezza del body e quindi essere scrollabile oppure essere più corta del body.
Il body ha una texture di background che ripetendosi sia in orizzontale che in verticale genera uno sfondo a righe nel body, non nella colonna.
Volendo ai margini della colonna un bordo sfumato ho posizionato un ulteriore background per la colonna dove l'immagine di una striscia si ripete solo in verticale.
In sostanza, per non parlare di cose astratte, il codice è più o meno così:
Codice PHP:
body {
background: url(texture_Rigata);
margin:0 auto;
text-align:center;
padding:0;
height:100%;
}
#bordoColonna {
background url(striscia_con_Bordi_Sfumati) center repeat-y;
width:840px;
margin:0 auto;
text-align:center;
padding:0;
height:100%;
}
#ColonnaContenitore {
width:800px;
margin:0 auto;
text-align:left;
}
Codice PHP:
<body>
<div id="bordoColonna">
<div id="ColonnaContenitore">
Contenuto
</div>
</div>
</body>
Il problema è che se la colonna diventa scrollabile (e ciò non è controllabile poiché dipende dalla risoluzione dello schermo) il bordo sfumato termina all'altezza del body e scrollando lascia il rimanente della colonna senza bordo.
Per contro se non imposto l'altezza del body o l'altezza del box bordoColonna, dove la colonna ha altezza minore del body non arriva a fondo pagina ma termina prima (sotto la colonna chiaramente si vede il body con il suo sfondo a righe).