Le nuove specifiche CSS3 definiscono nuove proprietà per gli sfondi e potenziano quelle esistenti. In questa prima lezione dedicata all'argomento vedremo come sfruttare la possibilità di definire più immagini per gli sfondi grazie alla ridefinizione della proprietà background-image.
Per una panoramica generale sugli sfondi nei CSS, invece, rimandiamo alla lezione Gestione dello sfondo della guida CSS di base.
Immagini di sfondo multiple
I CSS2 prevedono che ad un elemento possa essere assegnata una sola immagine di sfondo. I CSS3, invece, abbattono questo limite, consentendo agli sviluppatori di definire più immagini di sfondo per uno specifico elemento.
Ecco un esempio di codice che mostra come definire le immagini multiple:
background-image: url(immagine1.png), url(immagine2.png);Come si vede, i valori relativi all'URL di ciascuna immagine vanno separati da una virgola.
La specifica chiarisce poi un fattore decisivo: le immagini di sfondo vengono visualizzate su livelli diversi. L'immagine definita per prima nella lista apparirà sul primo livello, la seconda su un livello posto dietro al primo, e così via. Il meccanismo è simile a quello che regola la proprietà z-index. La cosa è rilevante, ad esempio, nel caso di immagini che vadano a sovrapporsi o nel caso si utilizzino texture.
Un ulteriore elemento da tenere in considerazione è il modo in cui le singole immagini usate come sfondo vanno definite rispetto ad altre proprietà come background-position, background-repeat, etc.
Riprendiamo lo snippet di codice precedente e impostiamo, oltre all'URL delle immagini, anche il loro posizionamento e il comportamento rispetto alla ripetizione:
div {
background-image: url(immagine1.png), url(immagine2.png);
background-position: top left, 20% 80%;
background-repeat: no-repeat, no-repeat;
}Non è complicato. Il primo valore per background-position (top left) definisce il posizionamento della prima immagine della lista (immagine1.png); il secondo valore (separato dal primo con una virgola), definisce il posizionamento della seconda immagine, e così via. Lo stesso vale per background-repeat. Attenzione sempre all'ordine dunque!
Esempi
Per chiarire meglio la teoria, ecco un esempio concreto. Vediamo il codice CSS:
#box {
width: 497px;
height: 700px;
margin: 20px auto;
border: 1px solid #333;
background-image: url(topRibbon.png), url(bottomRibbon.png), url(paper.jpg);
background-position: top left, bottom left;
background-repeat: no-repeat, no-repeat, no-repeat;
background-color: white;
}Abbiamo un div con id box largo 497px e alto 700px; è centrato orizzontalmente sulla pagina ed è circondato da un semplice bordo.
Per lo sfondo abbiamo usato tre immagini: sul primo livello una prima decorazione a nastro (url(topRibbon.png)), sul secondo livello un'altra decorazione (url(bottomRibbon.png)), sul terzo livello (quello posto dietro agli altri due) la texture di un foglio di carta (url(paper.jpg)).
Ricordate cosa abbiamo detto a proposito dell'ordine dei livelli? Se si usa una texture va sempre messa come ultima nell'ordine delle immagini. Ponendola infatti all'inizio, essa si posiziona sul primo livello e copre le altre immagini. Ecco la dimostrazione. Il codice usato è questo:
background-image: url(paper.jpg), url(topRibbon.png), url(bottomRibbon.png);Ma torniamo alla demo originaria:
#box {
width: 497px;
height: 700px;
margin: 20px auto;
border: 1px solid #333;
background-image: url(topRibbon.png), url(bottomRibbon.png), url(paper.jpg);
background-position: top left, bottom left;
background-repeat: no-repeat, no-repeat, no-repeat;
background-color: white;
}Dopo background-image abbiamo impostato il posizionamento delle tre immagini. La prima l'abbiamo posizionata nell'angolo superiore sinistro attraverso le coordinate top left; la seconda in basso a sinistra con bottom left; per la terza non abbiamo definito alcun valore, per cui l'immagine andrà a posizionarsi a partire dall'angolo superiore sinistro per poi ricoprire l'area equivalente alle sue dimensioni (è l'effetto che vogliamo ottenere, la texture deve estendersi sull'intera area del div).
Per finire abbiamo impostato la ripetizione con background-repeat. Ancora una volta una tripletta di valori separati da una virgola, ciascuno fa riferimento all'immagine corrispondente. Nel codice si nota che nessuna delle tre immagini viene ripetuta.
Per concludere, abbiamo impostato uno sfondo con un colore solido. È infatti buona norma, consigliata anche del W3C, usare un valore per il colore di sfondo a beneficio dei dispositivi che non possono per qualunque motivo visualizzare immagini.
La proprietà shorthand background e gli sfondi multipli
Come è noto, le singole proprietà relative al background possono essere raggruppate in un'unica regola usando la proprietà shorthand background. L'introduzione degli sfondi multipli non modifica lo scenario.
In pratica, il codice dell'esempio
background-image: url(topRibbon.png), url(bottomRibbon.png), url(paper.jpg);
background-position: top left, bottom left;
background-repeat: no-repeat, no-repeat, no-repeat;può essere così espresso usando background:
background: url(topRibbon.png) top left no-repeat, url(bottomRibbon.png) bottom left no-repeat, url(paper.jpg) no-repeat white;In questo caso, i valori relativi a ciascuna immagine vengono raggruppati e separati dagli altri con una virgola.
Approfondimenti
Per ulteriori approfondimenti sulla gestione degli sfondi, consigliamo la lettura dei seguenti articoli:
Tabella del supporto sui browser
| Sfondi |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Immagini di sfondo multiple | 9.0+ | 3.6+ | 1.3+ | 1.0+ | 10.5+ |