CSS  »  Articoli  »  CSS 3 

Per il terzo box è stato usato il valore content (content-box). Lo sfondo viene posizionato relativamente all'area del contenuto:

div#box3{
	width: 400px;
	padding: 10px;
	border: 10px dashed red;
   	background: url('htmlit.gif');
   	background-repeat: no-repeat;
   	background-position: 0 0;
   	-moz-background-origin: content;
   	-webkit-background-origin: content;
   	background-origin: content-box;
}

La proprietà background-origin può essere applicata anche a sfondi con immagini multiple, come abbiamo fatto nel Box 4:

div#box4{
	width: 400px;
	padding: 10px;
	border: 10px dashed red;
   	background-image: url('htmlit.gif'),url('htmlit.gif');
   	background-repeat: no-repeat;
   	background-position: 0 0,100% 100%;
   	-moz-background-origin: content, border;
   	-webkit-background-origin: content, border;
   	background-origin: content-box, border-box;
}

Le regole vanno lette tenendo presente quanto abbiamo fissato nell'articolo dedicato agli sfondi con immagini multiple. Due immagini di sfondo separate da virgola, due valori di posizionamento separati da virgola, due valori per l'origine separati da virgola. La prima immagine di sfondo viene posizionata rispetto all'area del contenuto. La seconda rispetto al bordo.

Detto che la proprietà se sfruttata al meglio può essere spunto per ottime soluzioni creative, chiudiamo con la consueta tabella di compatibilità:

Non supportata	Firefox 1.0 e versioni successive	Safari 3.0 e versioni successive	Chrome 1.0 e versioni successive	Opera 10.5 e versioni successive

background-size

Altra proprietà introdotta nei CSS3 per la gestione degli sfondi è background-size. Serve a specificare una dimensione per l'immagine di sfondo applicata ad un elemento e/o il modo in cui l'immagine in questione si estende all'interno dell'elemento.

I valori possibili sono misure assolute con unità di misura, percentuali, le parole chiave cover o contain.

La proprietà al momento gode di un supporto molto parziale e con diversi bug sulla maggior parte dei browser. Al momento l'unico programma che la implementa in modo corretto e pressoché totale è Firefox 3.6. Proprio partendo dalla pagina di documentazione di Mozilla dedicata alla proprietà, possiamo vederla azione in alcuni esempi, anche comparativi.

Tutti gli esempi visti nell'articolo sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter