Sfondi multipli Immagini di sfondo multiple Esempi

Sfondi multipli
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à backgroundimage.
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:
1
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à comebackgroundposition, 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:
1
2
3
4
5
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); ilsecondo valore
(separato dal primo con una virgola), definisce il posizionamento della seconda immagine, e
così via. Lo stesso vale perbackground-repeat. Attenzione sempre all'ordine dunque!
Esempi
Per chiarire meglio la teoria, ecco un esempio concreto. Vediamo il codice CSS:
1
#box {
width: 497px;
2
height: 700px;
3
margin: 20px auto;
4
border: 1px solid #333;
5
background-image: url(topRibbon.png), url(bottomRibbon.png),
6
url(paper.jpg);
background-position: top left, bottom left;
7
background-repeat: no-repeat, no-repeat, no-repeat;
8
9
10
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),
1 url(bottomRibbon.png);
Ma torniamo alla demo originaria:
1
2
3
4
5
6
7
8
9
10
#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:
1 background: url(topRibbon.png) top left no-repeat, url(bottomRibbon.png) bottom left no-r
1
2
3
repeat white;
In questo caso, i valori relativi a ciascuna immagine vengono raggruppati e separati dagli altri
con una virgola.