Corsi on-line

Background multipli con CSS3

Grazie a CSS3 è possibile impostare più di un’immagine di sfondo per un componente di pagina grazie alla definizione di una semplice lista i cui elementi dovranno essere separati con una virgola; facciamo un semplice esempio:

#doppio_sfondo_immagine {
 width: 300px;
 height: 150px;
 background-image: url(immagine1.png), url(immagine2.png);
 background-position: center bottom, right top;
 background-repeat: no-repeat;
 } 

I background multipli potranno essere definiti anche specificando delle proprietà distintive per ognuno di essi, ciò sarà possibile grazie all’utilizzo del shorthand “background”

background: url(immagine1.png) center bottom no-repeat, url(immagine2.png) right top no-repeat;

CSS3 permette di richiamare background multipli utilizzando meno codice possibile, se per esempio desiderassimo integrare tre immagini di sfondo ed evitarne la ripetizione, una regola come la seguente:

background-image: url(1.png), url(2.png), url(3.png);
background-repeat: no-repeat;

permetterà di ottenere lo stesso risultato di:

background-image: url(1.png), url(2.png), url(3.png);
background-repeat: no-repeat, no-repeat, no-repeat;

In questo modo si potranno evitare inutili ripetizioni che rallenterebbero il caricamento dei fogli di stile.

Post correlati
I più letti del mese
Tematiche