Sfondi multipli con i css3

23 Nov,2014 lucio css3, tutorial 3.286 views

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.

Chi è lucio ?

Lucio Ticali è un Web & App developer con la passione per il web marketing,si occupa anche di tecniche di indicizzazione del sito e di promozione dello stesso (SEO e SEM).