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 aupadding(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.
Le point d'origine commence à la bordure (border-box)
div {
/* ... */
background-origin: border-box;
}
En tenant compte de la bordure.
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.
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é.