Un altra novità interessante di CSS3 consiste nella possibilità di utilizzare multiple immagini di sfondo. In pratica, CSS3 offre ai designer di pagine web la possibilità di combinare diverse immagini di sfondo per un medesimo box. Per faro si utilizzano la consuete proprietà di gestione dei background alle quale si passeranno più valori separati da una virgola. Vediamo un esempio:
div.starwars {
width: 400px;
height: 200px;
background-image: url(r2-d2.png), url(spazio.jpg);
background-position: center bottom, left top;
background-repeat: no-repeat;
}Ed ecco il risultato:
Come potete notare, all’interno della proprietà background-image abbiamo specificato le URL di due diverse immagini per il nostro sfondo. Questa la sintasi:
background-image: url(img1), url(img2), ..., url(imgN)Nel nostro esempio:
- r2-d2.png – è una semplice icona trasparente in formato PNG di dimensioni 128×128 pixel;
- spazio.jpg – è un’immagine in formato JPG di dimensioni 600×350 pixel.
E’ importante sottolineare come sia fondamentale rispettare un ordine ben preciso nell’indicare le diverse immagini di sfondo: la prima immagine sarà quella più superficiale, le altre andranno via via a posizionarsi negli strati inferiori (ogni nuova immagine si posiziona sotto alla precedente).
Oltre alla proprietà background-image abbiamo utilizzato background-position per specificare (utilizzando sempre la virgola come separatore) il posizionamento di ciascuna immagine. Nel nostro esempio:
- r2-d2.png – si posiziona centrata in basso (center bottom);
- spazio.jpg – si posiziona in alto a sinistra (left top).
E’ possibile applicare valori multipli a tutte le proprietà per la gestione dello sfondo (come background-repeat, background-attachment, background-position, background-clip, background-origin e background-size). Sia il numero che l’ordine con cui devono essere specificati i valori deve corrispondere a quello delle diverse immagini specificate in background-image.
E’ anche possibile, pur avendo diverse immagini di sfondo, specificare un unico valore per talune proprietà. Nel nostro esempio, la proprietà background-repeat è stata settata con un unico valore (no-repeat) che, pertanto, verrà applicato a tutte le immagini di sfondo.
Utilizzare la proprietà background
E’ anche possibile utilizzare la sintassi breve che prevede l’utilizzo della proprietà background. Volendo riprodurre l’esempio visto in precedenza:
background: url(r2-d2.png) center bottom no-repeat, url(spazio.jpg) left top no-repeat;