Niveau : Débutant

Arrière-plans avec CSS3 Backgrounds

Tutoriel par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (151157 lectures)
Tags : css, images, background, css3, background-image

Sommaire


Plusieurs images dans un arrière-plan : background multiple

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.

Background multiple

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;
}

Démonstration

Prise en charge

Navigateurs Versions
Internet Explorer Internet Explorer 9+
Firefox Firefox 3.6+
Chrome Chrome 2+
Safari Safari 2+
Opera Opera 9.5+