Sono Andrea Tonin di Rovigo, mi occupo per professione di programmazione CSS e HTML. Ho una grande passione per la grafica e per i siti internet visuali ed interattivi! Spero che questo corso pratico di CSS vi possa essere utile :)

In CSS3 è possibile utilizzare degli sfondi multipli, vediamo come.
Attenzione! Gli sfondi multipli non sono supportati da Internet Explorer versione 8 e precedenti, pertanto si ricorre ad una dichiarazione di sicurezza per i browser meno recenti.

Prima di tutto abbiamo a disposizione 3 immagini:
IMMAGINE1

IMMAGINE2

IMMAGINE3

Vediamo il seguente codice:

<!DOCTYPE html>
<html>
 
<head>
<title>Titolo del documento</title>
 
<style type="text/css">  
#esempio1 {
/* la dimensione del box sarà quella di IMMAGINE3 */
width: 500px;
height: 281px;

border: 5px solid #333;

/* dichiarazione di sicurezza per i vecchi browser, viene saltata dai nuovi browser */
background: #ffffff url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/lulu_cielo.png) top left;

/* carico in ordine IMMAGINE 1 2 3 */
background-image: url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/lulu.png), url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/lulu_sole.png), url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/lulu_cielo.png); 

/* posiziono in ordine IMMAGINE 1 2 3 */
background-position: bottom right, top left,top left;

/* ripeto in ordine IMMAGINE 1 2 3 */
background-repeat: no-repeat, no-repeat, no-repeat;
background-color: white;
}
</style> 

</head>
 
<body>
<div id="esempio1">
</div>
</body>
 
</html>

Vediamo il risultato finale qui sotto:

Il mio sito ufficiale>