background-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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).

Exemple interactif

background-origin: border-box;
background-repeat: no-repeat;

background-origin: padding-box;
background-repeat: no-repeat;

background-origin: content-box;
background-repeat: no-repeat;

<section id="default-example">
  <div id="example-element">This is the content of the element.</div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/leopard.jpg");
  color: #d73611;
  text-shadow: 2px 2px black;
  padding: 20px;
  border: 10px dashed #333;
  font-size: 2em;
  font-weight: bold;
}

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

css

/* 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: revert;
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.

Définition formelle

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	une liste répétable

Syntaxe formelle

background-origin = 
  <visual-box>#  

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

Exemples

Définir différentes origines

css

.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}

css

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}

css

div {
  background-image:
    url("logo.jpg"), url("mainback.png"); /* Applique deux images en arrière-plan */
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}

Utiliser deux dégradés

Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le premier dégradé utilise padding-box pour background-origin et l'arrière-plan s'inscrit donc à l'intérieur de la bordure. Le second dégradé utilise content-box et apparaît donc uniquement derrière le contenu.

HTML

html

<div class="box">Coucou !</div>

CSS

css

.box {
  margin: 10px 0;
  color: #fff;
  background:
    linear-gradient(
      90deg,
      rgba(131, 58, 180, 1) 0%,
      rgba(253, 29, 29, 0.6) 60%,
      rgba(252, 176, 69, 1) 100%
    ),
    radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # the-background-origin

Compatibilité des navigateurs

Voir aussi

background-clip