CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat.
Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.
Syntaxe générale
background-image: url("image1"), url("image2");
background-position: x y, x y;
background-repeat: no-repeat;
Les différentes valeurs doivent être ajustées en fonction du nombre d'images à charger et de leurs positions respectives.
L'ordre de déclaration est important : dans l'exemple ci-après, la position left top s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Si une seule propriété est spécifiée, elle sera appliquée à l'ensemble des images.
div {
background-image: url("logo-alsacreations-com.png"), url("soif.jpg");
background-position: right bottom, left top;
background-repeat: no-repeat;
}
Prise en charge
| Navigateurs | Versions |
|---|---|
 |
Internet Explorer 9+ |
 |
Firefox 3.6+ |
 |
Chrome 2+ |
 |
Safari 2+ |
 |
Opera 9.5+ |