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

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 initialepadding-box
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Valeur calculéecomme spécifié
Type d'animationune 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

must be provided

Spécifications

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

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-origin
border-box
content-box
padding-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi