CSS 3 rend possible l'affichage de plusieurs images dans un même arrière plan 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é sera l'image de premier plan.

Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.

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.

Syntaxe

background-image: url("image1"), url("image2"); 
background-position: x y, x y;
background-repeat: no-repeat;

Illustration : deux images de fond sur un même élément

Code source exemple :

div {
  background-image:url(soif.jpg);
  background-image: url("logo-alsacreations-com.png"), url("soif.jpg");
  background-position: right bottom, left top;
  background-repeat: no-repeat;
}

Démonstrations