Immagini di sfondo ripetute e fisse con i CSS

Senza ricorrere all'uso delle tabelle, possiamo ottenere lo stesso risultato con il solo uso dei CSS e XHTML.

Cominciamo a vedere il file finale. I due bordi, inferiore e superiore, sono stati volutamente creati di colore diverso. Adesso passiamo alla spiegazione di come è stato costruito. Se avessimo utilizzato le tabelle, avremmo avuto 3 righe ed una singola colonna; invece, con i CSS, abbiamo un div contenitore ed al suo interno altri 3, uno per ogni oggetto inserito nella pagina. Il codice del div contenitore è il seguente:

div#container{
width:500px;
margin:20px auto;
padding:0;
border:1px solid #000;
}

Siccome la dimensione della fotografia è di 500 pixel, necessariamente il box deve adattarsi ad essa; margin:20px auto per avere sempre lo stesso box al centro della pagina ed inoltre per vederlo centrato anche con altri browser. Il codice dei 3 div interni è:

div#alto{
margin:0;
padding:0;
height:25px;
width:500px;
background-image:url(alto.gif);
background-position:top left;
background-repeat:repeat;
}
div#centro{
margin:0;
padding:0;
height:250px
}
div#basso{
margin:0;
padding:0;
height:25px;
width:500px;
background-image:url(basso.gif);
background-position:top left;
background-repeat:repeat;
}

Il codice html da inserire nel body è:

<div id="container">
<div id="alto"></div>
<div id="centro"><img src="/girasole.jpg" alt="girasole" /></div>
<div id="basso"></div>
</div>

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati