Niveau : Débutant

Arrière-plans avec CSS3 Backgrounds

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

Sommaire


background-origin

La propriété background-origin positionne la zone de l'arrière plan (ou plutôt le point d'origine de l'image d'arrière plan).

Syntaxe de la propriété

 background-origin: [border-box|padding-box|content-box];

Valeurs possibles

  • border-box : La position de l'arrière plan est relative au bord : l'image peut donc se positionner derrière les bords.
  • padding-box : La position de l'arrière plan est relative au padding (marge interne)
  • content-box : La position de l'arrière plan est relative au contenu.

Le point d'origine est celui du contenu (content-box)

div {
  /* ... */
  background: url(soif.jpg) no-repeat;
  background-origin: content-box; 
}

Dans ce cas, c'est la boîte du contenu qui sert de référence.

Background-origin content-box

Le point d'origine commence à la bordure (border-box)

div {
  /* ... */
  background-origin: border-box;
}

En tenant compte de la bordure.

Background-origin border-box

Le point d'origine commence à partir du padding (padding-box)

div {
  /* ... */
  border: 20px dotted #393838;
  background-origin: padding-box;
}

Cette fois-ci l'arrière-plan s'applique à partir du padding.

Background-origin padding-box

Démonstrations

Prise en charge

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

Le préfixe -moz-, -webkit-, -ms- ou -o- pourra être requis pour les navigateurs utilisant des pré-versions de cette propriété.