CSS3 background: sfondi multipli con più di una immagine

Vediamo come gestire gli sfondi delle pagine web e come implementare immagini multiple creando la nostra composizione.

Tra le nuove proprietà CSS3, molto interessanti appaiono quelle relative alla gestione dei background (sfondi) delle pagine web. Una in particolare è quella che permette di implementare immagini multiple tramite una dichiarazione molto snella.

Proviamo a fare un esempio:

body{background-image:url(immagine-destra.gif),url(immagine-centro.gif),url(immagine-sinistra.gif);}

In questo piccolo snippet abbiamo implementato una sequenza URL di immagini che ci permette di creare la nostra composizione. Utilizzando una grafica particolare e non definita (ad esempio delle forme geometriche) è possibile creare degli sfondi lineari ed omogenei. Questa proprietà è supportata da tutti i browser di navigazione, Internet Explorer compreso.

Tuttavia, in presenza di numerose URL la gestione potrebbe diventare difficoltosa, pertanto è bene non esagerare.

body{background: url(img-alto.gif) top left no-repeat, url(banner-adv.jpg) top 11px no-repeat, url(img-basso.gif) bottom left no-repeat, url(img-mezzo.gif) left repeat-y;}

Come si nota nell’esempio in alto, è possibile porre in essere anche una sintassi più complessa e creare sfondi di ogni tipo.