attribut BACKGROUND-ORIGIN
Rôle
L’attribut background-origin permet de spécifier le point d’origine pour l’insertion d’une image de fond.
En effet ce point peut être situé :
- sur le coin supérieur gauche de la boite après la bordure
- sur le coin supérieur gauche du contenu de la boite
- sur le coin supérieur gauche de la boite, bordure compris
L’attribut background-origin est utilisée conjointement avec background-image et background-position
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.backgroundOrigin
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
div{
width: 150px;
padding:25px;
border: 5px grey dashed;
background-image: url(//lorempixel.com/output/abstract-q-c-50-50-2.jpg);
background-repeat: no-repeat;
background-position: left center;
float: left;
margin: 10px;
}
#d1{
-webkit-background-origin: border-box;
background-origin: border-box;
}
#d2{
-webkit-background-origin: padding-box;
background-origin: padding-box;
}
#d3{
-webkit-background-origin: contex-box;
background-origin: content-box;
}
– Le code HTML
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, quis consequuntur. </div> <div id="d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, quis consequuntur. </div> <div id="d3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, quis consequuntur. </div>
Résultat visuel
Compatibilité
L’attribut background-size est pris en charge par tous les principaux navigateur
A partir de IE-9. Pour implémenter cet attribut sur un ensemble de navigateur, utilisez les préfixes -webkit- (Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opera)
Valeurs
Les différentes valeurs de l’attribut background-origin sont:
- content-box
- L’origine se situe sur le coin supérieur gauche du contenu
Syntaxe :
background-origin : content-box - padding-box
- L’origine se situe sur le coin supérieur gauche de la boîte sans la bordure mais comprenant la marge interne (padding )
Syntaxe :
background-origin : padding-box - border-box
- L’origine se situe sur le coin supérieur gauche de la boîte, bordure compris
Syntaxe :
background-origin : border-box - initial
- L’origine est définie à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer l’origine de positionnement imposée par une feuille de style qui le cible.
Syntaxe :
background-origin : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
background-origin : inherit
A voir aussi
background– background-color– background-image– background-position– background-repeat–background-size– background-origin– background-clip– background-attachment
