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) :
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.