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.

Syntaxe

/* Valeurs avec un mot-clé */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Valeurs globales */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

Valeurs

border-box
L'arrière-plan est positionné relativement à la boîte de bordure.
padding-box
L'arrière-plan est positionné relativement à la boîte de remplissage (padding).
content-box
L'arrière-plan est positionné relativement à 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.

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é
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1
Support complet 1
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Support complet 12Firefox Support complet 4
Support complet 4
Support complet 49
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Aucun support 1 — 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Support complet 9
Notes
Support complet 9
Notes
Notes In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
Opera Support complet 10.5
Support complet 10.5
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari Support complet 3
Support complet 3
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
WebView Android Support complet 4.1
Support complet 4.1
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Chrome Android Support complet Oui
Support complet Oui
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Mobile Support complet OuiFirefox Android Support complet 14
Support complet 14
Support complet 49
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari iOS Support complet Oui
Support complet Oui
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Samsung Internet Android Support complet Oui
content-boxChrome Support complet 1Edge Support complet 12Firefox Support complet 4IE Support complet 9
Notes
Support complet 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera Support complet 10.5Safari Support complet 3WebView Android Support complet 4.1Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 14Opera Android Support complet 12.1Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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