Arrière-plans avec CSS 3 Backgrounds

Niveau : Débutant

Arrière-plans avec CSS 3 Backgrounds

Plusieurs images dans un Background

Tutoriel par Simon-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)
Mis à jour le 11 Août 2009. 10379 lectures.
Tags : css, images, css3

Sommaire

Plusieurs images dans un Background

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 du 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.

div {
  ...
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg");
  background-position: left top,right bottom;
  background-repeat: no-repeat,no-repeat;
}

mutliple-background

Le code suivant affiche exactement le même résultat que précédemment.

div {
  ...
  background-color:#5fc9cd;
  background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg");
  background-position: left top,right bottom;
  background-repeat: no-repeat;
}

Illustrons le système de calque et de chevauchement :

div {
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg");
  background-position: left top,45px 30px;
  background-repeat: no-repeat;
}

superposition de 2 images en arrière-plan

En inversant simplement l'ordre des images :

div {
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-vert.jpg"),url("alsa-beige.jpg");
  background-position: left top,45px 30px;
  background-repeat: no-repeat;
}

superposition des images 2