Résumé
La propriété CSS background-origin détermine la zone de positionnement de l'arrière-plan, soit la position de l'origine d'une image spécifiée en utilisant la propriété CSS background-image.
Il faut noter que background-origin est ignorée si background-attachment est défini à fixed
background qui s'applique à l'élément après la propriété CSS background-origin, la valeur de cette propriété est alors réinitialisée par la propriété raccourcie.- Valeur initiale
padding-box - S'applique à tous les éléments
- Héritée non
- Média
visuel - Valeur calculée comme spécifiée
Syntaxe
background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
Valeurs
- border-box
- L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (tout en restant en-dessous de la bordure sur l'axe z).
- padding-box
-
Aucun arrière-plan n'est dessiné en-dessous de la bordure (l'arrière-plan s'étend jusqu'à la bordure extérieure du
padding). - content-box
- L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.
Exemples
.example {
border: 10px double;
padding: 10px;
background: url('image.jpg');
background-position: center left;
/* L'arrière-plan sera dans le padding */
background-origin: content-box;
}
div {
background-image: url('mainback.png'), url('logo.jpg');
background-position: 0px 0px, top right;
background-origin: padding-box, content-box;
}
Spécifications
| Spécification | Statut | Commentaire |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 | Candidate Recommendation |
Compatibilité des navigateurs
| Fonction | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support de base | 1.0 [3] | 4.0 (2.0) [1] | 9.0 [2] | 10.5 | 3.0 (522) [3] |
content-box |
1.0 [3] | 4.0 (2.0) [1] | 9.0 [2] | Pas de support | 3.0 (522) [3] |
| Fonction | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support de base | ? | ? | ? | ? | ? |
content-box |
? | ? | ? | ? | ? |
[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond à Firefox 1.0 jusqu'à Firefox 3.6 inclus, la syntaxe préfixée : -moz-background-origin: padding | border.
[2] Internet Explorer jusqu'à la version 7 se comporte comme si la propriété suivante était définie : background-origin: border-box; Internet Explorer 8 se comporte comme si la propriété suivante était définie : background-origin: padding-box; ce qui est la valeur par défaut habituelle.
[3] Webkit support aussi une version préfixée de cette propriété, qui dans le cas présent accepte, en plus des mots-clés actuels, les synonymes suivants : padding, border, et content.
[4] Konqueror 3.5.4 supporte -khtml-background-origin.
Voir également
- Propriétés CSS liées à l'arrière-plan : Background-related CSS properties:
background,background-attachment,background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size