Accueil    CSS    Propriété Background-origin
 



style css background-origin  Style CSS background-origin

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété background-origin permet de définir le point de référence pour appliquer un arrière-plan. Par défaut l'origine de l'arrière-plan d'un élément correspond à son angle supérieur gauche. Il est avec cette propriété possible de définir un nouveau point de référence :
    - border-box : angle supérieur gauche de la bordure
    - padding-box : angle supérieur gauche de l'intérieur de l'élément (hors de la bordure)
    - content-box : angle supérieur gauche du contenu uniquement (espacé de la bordure par un padding)

Pour définir la zone d'application d'une couleur d'arrière-plan suivant ces mêmes critères, il faut employer le style css background-clip.

Il est possible d'associer les styles background-clip et background-origin, cependant si la propriété backgroud-clip est plus restrictive que la propriété background-origin, l'image de fond sera partiellement tronquée.



Propriétés pour le style background-origin :




Propriété Définition Valeurs CSS
background-origin Défini le point de référence à partir duquel sera affichée l'image d'arrière-plan du conteneur border-box
content-box
padding-box
CSS 3


Exemple d'utilisation du style css background-origin :






<div style="width:350px; height:80px; border:dashed 3px black; padding:10px; background-repeat:no-repeat;
   background-image:url(exemple.png); background-origin:border-box;">
   Exemple d'arrière plan avec la propriété :
   background-origin:border-box
</div>

<div style="width:350px; height:80px; border:dashed 3px black; padding:10px; background-repeat:no-repeat;
   background-image:url(exemple.png); background-origin:padding-box;">
   Exemple d'arrière plan avec la propriété :
   background-origin:padding-box
</div>

<div style="width:350px; height:80px; border:dashed 3px black; padding:10px; background-repeat:no-repeat;
   background-image:url(exemple.png); background-origin:content-box;">
   Exemple d'arrière plan avec la propriété :
   background-origin:content-box
</div>


Association des styles background-clip et background-origin :

<div style="border:dashed 3px black; width:350px; height:80px; padding:10px; background-color:silver;
   background-image:url(exemple.png); background-repeat:no-repeat; background-clip:padding-box;
   -webkit-background-clip:padding-box; background-origin:content-box;">
   Exemple d'arrière plan avec les propriétés :
   background-origin:content-box
   background-clip:padding-box
</div>

Cependant si la propriété backgroud-clip est plus restrictive que background-origin, l'image de fond sera partiellement tronquée :

<div style="border:dashed 3px black; width:350px; height:80px; padding:10px; background-color:silver;
   background-image:url(exemple.png); background-repeat:no-repeat; background-clip:content-box;
   -webkit-background-clip:content-box; background-origin:border-box;">
   Exemple d'arrière plan avec les propriétés :
   background-origin:border-box
   background-clip:content-box
</div>




Exemple d'arrière plan avec la propriété :
background-origin:border-box



Exemple d'arrière plan avec la propriété :
background-origin:padding-box



Exemple d'arrière plan avec la propriété :
background-origin:content-box


Association des styles background-clip et background-origin :


Exemple d'arrière-plan avec les propriétés :
background-origin:content-box
background-clip:padding-box

Cependant si la propriété backgroud-clip est plus restrictive que background-origin, l'image de fond sera partiellement tronquée :


Exemple d'arrière-plan avec les propriétés :
background-origin:border-box
background-clip:content-box