CSS3, uso di immagini di background multiple

La nuova proprietà dei CSS3 che permette l'utilizzo di più immagini come sfondo degli elementi ci consente di poter giocare sui nostri layout con una grande elasticità, proponendo effetti di movimento anche per quanto riguarda gli sfondi, pur mantenendo comunque una linea grafica costante in ogni pagina.
L'esempio che propongo è molto semplice: attraverso l'utilizzo di due immagini di sfondo, una foto sottacqua e l'illustrazione di un pesce, nelle tre pagine semplicemente modifico la posizione del pesce per significare un effetto di spostamento all'interno dell'ambiente prescelto.
La sintassi utilizzata è la forma sintetica
        background: url(pescetto.png) left bottom no-repeat, url(underwater.jpg) left top no-repeat;
ad ogni immagine seguono le regole, ed ogni immagine è separata dalla successiva con la virgola.
La sintassi estesa avrebbe invece previsto
    background-image: url(pescetto.png), url(underwater.jpg);
    background-position: left bottom, left top;
    background-repeat: no-repeat, no-repeat;
Ecco l'esempio (con visualizza codice/html del browser potete vedere il foglio stile interno)!