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).
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
/* 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
Exemples
Définir différentes origines
.example {
border: 10px double;
padding: 10px;
background: url("image.jpg");
background-position: center left;
background-origin: content-box;
}
#example2 {
border: 4px solid black;
padding: 10px;
background: url("image.gif");
background-repeat: no-repeat;
background-origin: border-box;
}
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
<div class="box">Coucou !</div>
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
BCD tables only load in the browser