Accueil >CSS >Référence CSS – propriétés, sélecteurs, fonctions >background-origin

background-origin

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

Définit la zone dans laquelle se place l’image d’arrière-plan – background-position et les pourcentages de background-size se calculent à partir d’elle. La valeur par défaut padding-box commence à l’intérieur de la bordure.

Valeurs

padding-box – par défaut : à partir du bord intérieur de la bordure.
border-box – à partir du bord extérieur de la bordure.
content-box – à partir du contenu, sans la marge intérieure (padding).

Valeur initiale : padding-box. Héritée : non. S’applique à : tous les éléments.

Exemples

Une image sans répétition dans le coin supérieur gauche de la zone – la bordure est en tirets, la marge intérieure de 14 px :

<figure><div class="sample border"></div><figcaption>border-box</figcaption></figure>
<figure><div class="sample"></div><figcaption>padding-box</figcaption></figure>
<figure><div class="sample content"></div><figcaption>content-box</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.sample {
  width: 90px;
  height: 60px;
  padding: 14px;
  border: 8px dashed #333;
  background-color: #ffeb3b;
  background-image: url(/img/slider.jpg);
  background-repeat: no-repeat;
  background-size: 50px auto;
}
.border { background-origin: border-box; }
.content { background-origin: content-box; }

Résultat

border-box

padding-box

content-box

Points d’attention

L’origine ne fait que déplacer le début de l’image. Elle est toujours peinte selon background-clip (par défaut aussi sous la bordure), si bien qu’une image répétée couvre la marge intérieure et la bordure même avec content-box.
Avec background-attachment: fixed, elle ne s’applique pas – la zone est la fenêtre du navigateur.
Elle n’agit pas sur la couleur d’arrière-plan, qui ne suit que background-clip.
Dans le raccourci background, une valeur de boîte règle à la fois l’origine et le rognage ; avec deux valeurs, la première est l’origine.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 4, Safari 3. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
background-clip
background-position
background-size
padding
box-sizing