background-origin

La propriété background-origin détermine l'origine de l'arrière-plan background-image à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (padding).

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>#où 
<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 initiale	`padding-box`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

background-clip