back to top

CSS3 background multipli: usare più di un’immagine di sfondo

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:

sfondo creato con due immagini sovrapposte

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.
immagini utilizzate per lo sfondo multiplo

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;
Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).