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).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
.
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: 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
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
Spécification | État | Commentaires |
---|---|---|
CSS Backgrounds and Borders Module Level 3 La définition de 'background-origin' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
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 | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
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.