Sfondi CSS3: proprietà background

Nuove proprietà background per sfondi CSS3. Codici ed esempi.

Background-clip

Background-clip è una nuova proprietà che specifica le aree di sfondo da colorare. È supportata da tutti i maggiori browser: Internet Explorer 9, Firefox 4, Opera e Chrome. Per funzionare su Apple Safari c’è bisogno di un piccolo hack supplementare.

Background-clip opera grazie a 3 valori:

padding-box, che colora appunto l’area padding ed esclude il bordo;
content-box, che applica solo la cosiddetta “area contenuto”;
border-box, che applica lo sfondo fino ai bordi dell’elemento.

Nell’esempio in basso è stata applicata la proprietà clip solo a un’area specifica di contenuto:

div{background-color:yellow;background-clip:content-box;-webkit-background-clip:content-box; /* Safari */}

Background-origin

Background-origin specifica l’area di posizionamento delle immagini di sfondo. È supportata da tutti i maggiori browser: Internet Explorer 9, Firefox 4, Opera, Safari 5 e Chrome. Anche background-origin sfrutta gli stessi valori di background-clip (pudding, border e content).

Nell’esempio in basso viene indicata la posizione di un’immagine all’interno di un content-box:

div{background-image:url(sfondo.gif');background-repeat:no-repeat;background-position:left;background-origin:content-box;}

Background-size

La proprietà CSS3 background-size specifica la dimensione di un’immagine di sfondo. I valori possono essere espressi in pixel o in percentuali. È supportata da tutti i maggiori browser: Internet Explorer 9, Firefox 4, Opera, Safari 5 e Chrome.

Le immagini possono essere ingrandite e rimpicciolite rispetto alla dimensione originale.

Esempio espresso in pixel:

div{background:url(img_sfondo.gif);background-size:80px 60px;background-repeat:no-repeat;}

Esempio espresso in percentuale:

div{background:url("img_sfondo.gif");background-size:100% 100%;background-repeat:no-repeat;}