I. Principe de fonctionnement

Le principe est très simple, il suffit d'ajouter autant d'URL d'images que nécessaire dans la propriété background.

Voici un exemple : demo

 
Sélectionnez

.multipleBackground{
    position:relative;
    width:200px;
    height:120px;
    background:url(../images/site/browsers/chrome.png) 0 0 no-repeat,
	url(../images/site/browsers/firefox.png) 30px 30px no-repeat,
	url(../images/site/browsers/safari.png) 60px 60px no-repeat,
	url(../images/site/template/projects.png) 0 0 no-repeat;
}
			

Vous remarquerez que l'image en premier plan est déclarée en premier dans la propriété background.

II. Avec un dégradé

Il est à noter que l'on peut inclure un gradient (ne fonctionne pas sous Opera, ni sous IE9) :

demo

 
Sélectionnez

.multipleBackgroundGradient{
    position:relative;
    width:200px;
    height:120px;
    /*Pour Navigateur Webkit*/
    background:url(../images/site/browsers/chrome.png) 0 0 no-repeat,
	url(../images/site/browsers/firefox.png) 30px 30px no-repeat,
	url(../images/site/browsers/safari.png) 60px 60px no-repeat,
	-webkit-gradient(linear, left top, left bottom, from(#68cbd0), to(#000000));
    /*Pour Navigateur Mozilla*/
    background:url(../images/site/browsers/chrome.png) 0 0 no-repeat,
	url(../images/site/browsers/firefox.png) 30px 30px no-repeat,
	url(../images/site/browsers/safari.png) 60px 60px no-repeat,
	-moz-linear-gradient(top center, #68cbd0, #000000); 
}
			

le gradient étant en arrière-plan, il est déclaré en dernier.

III. Remerciements

Merci à ClaudeLELOUP et à jacques_jean pour leurs relectures.