Redazione
a- a+

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;
}



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?