background-origin

La propriété background-origin détermine la zone de positionnement de l'arrière-plan. Autrement dit, elle permet de définir la position de l'origine de l'image définie par la propriété background-image.

Attention, background-origin est ignorée lorsque background-attachment vaut fixed.

Note : Cette propriété est rattachée à la propriété raccourcie background. Aussi, si on a une déclaration background-origin avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour background-origin.

Valeur initialepadding-box
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-origin: inherit;

Valeurs

border-box
L'arrière-plan s'étend jusqu'à la bordure extérieure de la boîte de bordure (il est, selon l'axe z, situé sous la bordure).
padding-box
Aucun arrière-plan n'est dessiné sous la bordure. Autrement dit, l'arrière-plan s'étend jusqu'au bord extérieur de la boîte de remplissage (padding).
content-box
L'arrière-plan est uniquement dessiné sur la boîte de contenu.

Syntaxe formelle

<box>#


<box> = border-box | padding-box | content-box

Exemples

CSS

div {
  width: 200px;
  height: 100px;
}

.exemple {
  border: 10px double;
  padding: 10px;
  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
  background-color: palegreen;
  background-position: 0px 40px;
  background-origin: content-box;
  background-repeat: no-repeat;
}

HTML

<div class="exemple"></div>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-origin' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] Pas de support 3.0 (522) [3]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?
content-box ? ? ? ? ?

[1] Gecko prend en charge, entre la version et la version 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0) une version différente préfixée : -moz-background-origin: padding | border.
En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[2] Internet Explorer se comporte jusqu'à la version 7 comme s'il y avait background-origin: border-box; Internet Explorer 8 se comporte avec background-origin: padding-box; qui est la valeur par défaut correcte.

[3] Webkit supporte également une version préfixée avec les synonymes suivants padding, border et content (les mots-clés standards sont pris en charge).

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB, Mgjbot, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,