Blogger Book

Potresti voler utilizzare due immagini di sfondo in un elemento HTML o nel template del tuo blog, ad esempio per posizionarne una in alto e un'altra in basso, nel footer.

L'approccio più comune consiste nel creare due o più contenitori e assegnare a ciascuno uno sfondo. Ma questo non è necessario, perché possiamo utilizzare due o più immagini diverse nello stesso contenitore utilizzando la stessa proprietà di sfondo che abbiamo sempre usato.

Come creare sfondi multipli con CSS. 

Non è niente di speciale; basta usare la proprietà background-image e aggiungere gli URL delle immagini, separati da una virgola. 

Ad esempio, se volessimo aggiungere due immagini allo sfondo del blog, il risultato sarebbe simile a questo:

corpo {
background-image: url( URL immagine UNO ), url( URL immagine DUE );
}

Come cambiare la posizione.

E per cambiarne la posizione usiamo background-position , nello stesso modo imposteremo la proprietà per la prima immagine, poi metteremo una virgola e poi metteremo l'altra posizione.

corpo {
background-image: url( URL dell'immagine UNO ), url( URL dell'immagine DUE );
background-position: in alto a sinistra, in basso a destra;
}

corpo {
background-image: url( URL dell'immagine UNO ), url( URL dell'immagine DUE );
background-position: in alto a sinistra, in basso a destra;
background-repeat: no-repeat, no-repeat;
}

Come aggiungere un colore.

Se vogliamo aggiungere anche un colore di sfondo possiamo farlo utilizzando background-color .

corpo {
colore-sfondo: #ccc;
immagine-sfondo: url( URL immagine UNICA ), url( URL immagine DOS );
posizione-sfondo: in alto a sinistra, in basso a destra;
ripetizione-sfondo: no-repeat, no-repeat;
}

Di seguito puoi vedere un esempio con il DIV: sembra un'unica immagine, ma in realtà utilizziamo un colore di sfondo, poi un'immagine sopra e un'altra immagine sotto.

Il codice completo in CSS.

#doppiosfondo {
colore-sfondo: #f2f2f2;
immagine di sfondo: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCl7nre0v3Oy2rcRg84_adJqKxpxF9SX_ztfUkaUdTgjaHZZ UXN_dMtgePAOkr1skuQ03xLpNVVGfEgmKRh-hSrGxsDyVJdBRHi-8rITwXHvn-3ZQu_Lc-dfVA9fRuPIp3wWp3qlYlW9u5/s450/fundo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLP5IHot1HszZ8Fpddd7mLkShfF280AcPZX9SWRQLU1Day8R 721RSRlEQKiZ6M7hhKbAbmXgk_evmPsTZII0j6_KsnIXXmwi52nHyQaYyH2geE77PAfXivzmIfxeQ29Nt7LUP-p_ad6i1u/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position:relative;
margin: 0 self;
}
#doublebackground h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

Il codice completo in HTML

<div id="doblefondo">
<h2>Sfondi multipli con CSS</h2>
</div>

Ma il numero di immagini non è un limite, poiché possiamo usarne tre o più e assegnare a ciascuna una proprietà diversa. 

Come nel seguente esempio DIV, aggiungiamo tre immagini di sfondo, ciascuna con una posizione diversa, e la terza verrà ripetuta orizzontalmente.

Come cambiare il numero di immagini in CSS. 

Questo è il codice completo. 

 
CSS

#doppiosfondo {
colore di sfondo: #C5E0DC;
immagine di sfondo: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFa-lUnDJNdQLwXhluSCR8n2ND97Dqbbhbw2wDyq-l9DLgoU (1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZozCvrTOflFV_gZBX4KOzGCrEflxDDz6l6NA_7x3JzcgW_J j-vH77SI3ERHIqVK6x0y3lvxOfNkcvMurDJ-cdzLaQ1Er9MZTT9hmV8XWSe1K4wDNw3bXYLgsnVj6UW-V7fwJMn9kdqiqe/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxy4WB72ImiMGej0PvkRxHsREw7sK1MtCTyyimNKSsQdcKi QA-OePhIF-ZRMS7d87M-Q0gUu_zLkxnKNHKm7V-qg1AlGhnGvBdekGa0kMQWitzoYeW-SskSAMalBDXxFls6WwyhLlRpY6/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: in alto a destra, al centro al centro, in basso a sinistra;
larghezza: 349px;
altezza: 300px;
posizione: relativa;
margine: 0 self;
}

Come cambiare il numero di immagini in HTML. 

<div id="doppiofondo">
</div>

Come puoi vedere, aggiungere più di un'immagine di sfondo al modello o al contenitore del tuo blog è estremamente semplice. Ricorda sempre di separare proprietà e immagini con una virgola, tranne l'ultima, che non ha una virgola, solo un punto e virgola. 

Nel caso di Internet Explorer, funziona dalla versione 9 in poi, quindi praticamente tutti lo vedranno, dato che fortunatamente poche persone usano versioni precedenti.

Fonte