La propriété background-origin détermine la zone de positionnement de l'arrière-plan. Autrement dit, elle permet de définir la position de l'origine de l'image définie par la propriété background-image.
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
<box>#
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 |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
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.
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 11 | 12 | 42 3 | 94 | 10.5 | 31 |
content-box | 1 | 12 | 42 | 95 | 10.5 | 31 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | 4.1 | Oui | Oui | 14 | 12.1 | Oui | Oui |
content-box | 4.1 | Oui | Oui | 14 | 12.1 | Oui | Oui |
1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.
3. Since Firefox 49, also supports the -webkit prefixed version of the property.
4. In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.