Gestire lo sfondo di un elemento con CSS e immagini di background

Siccome esse sono collegate al foglio di stile e non all' XHTML, ci si dovrebbe preoccupare di inserire solo elementi decorativi. Le immagini che possono avere delle informazioni importanti (per esempio un link associato alla stessa), dovrebbero essere posizionate nell'XHTML. Si veda il seguente file di esempio: l' immagine non influisce, in nessun modo, con il contenuto del box. Potrebbe essere paragonata ad un colore di sfondo. Si veda il codice utilizzato:

div#content{
padding:20px 10px 10px 210px;
margin:5px auto;
background-color:#e7e7e7;
border:1px solid #f90;
width:80%;
background-image:url(ingranaggio.gif);
background-repeat:no-repeat;
background-position:top left;
text-align:left;
}

Da notare che, per motivi estetici, ho impostato il padding-left a 210 pixel; essendo l'immagine di 200 pixel, ho lasciato 10 pixel di distanza tra il testo e la fotografia. Altra cosa da notare:
background-repeat:no-repeat: se non avessi scritto questa proprietà per l' immagine, si sarebbe ripetuta per tutta l' area del box; in altri termini si sarebbe comportata come un pattern. Si può anche dichiarare che l' immagine si ripeta solo verticalmente o solo orizzontalmente:

background-repeat: repeat-x; /* ripete l'immagine in orizzontale */
background-repeat: repeat-y; /* ripete l'immagine in verticale */

Un' altra proprietà, sempre per le immagini di sfondo, è la posizione in cui deve collocarsi all' interno di un elemento. Nell' esempio visto prima ho scritto top left in riferimento a background-position. Il primo valore gestisce la posizione verticale dell' immagine; l' altro gestisce la posizione orizzontale. Nella prossima lezione realizzeremo una semplice pagina con gabbie ma che a primo sguardo potrebbe "trarre in inganno" in quanto non saranno visibili tutti i bordi dei box in cui metteremo i contenuti.

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