Tempo di lettura: < 1 minuto
Con i css3 è possibile applicare sfondi multipli alle vostre pagine web,in questo tutorial vedremo come.
Per applicare due o più immagini ad un elemento html è sufficiente specificare per le diverse proprietà collegate alle immagini di sfondo i valori associati ad ogni singola immagine separata da virgola. Forse è meglio se vediamo un esempio pratico:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Sfondi multipli</title>
<style>
body{
background:
url(terreno.png) left bottom repeat-x fixed,
url(alberi.png) left bottom repeat-x fixed,
url(montagne.png) 150px 100% no-repeat fixed,
url(nuvole1.png) 250px 20px no-repeat fixed,
url(nuvole2.png) 450px 100px no-repeat fixed,
url(nuvole3.png) 200px 90px no-repeat fixed,
url(sole.png) 20px 20px no-repeat fixed,
url(cielo.png) left top repeat-x fixed,
#d9e4ba;
}
</style>
</head>
<body>
</body>
</html>
Gli sfondi si dispongono uno dietro l’altro nell’ordine in cui sono specificati come nell’esempio.