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

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

Illustration : le point d'origine est celui du contenu

Code source :

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

---

Illustration : le point d'origine commence sous la bordure

Code source :

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

---

Exemple : le point d'origine commence à partir du padding

Code source :

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

Démonstrations

Prise en charge

Navigateurs	Versions
	Internet Explorer 9+
	Firefox 3.6+
	Chrome 3+
	Safari 3+
	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é.