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.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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

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

Compatibilité des navigateurs

Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub https://github.com/mdn/browser-compat-data, n'hésitez pas à contribuer en proposant vos pull request.

Voir aussi

• background-clip