CSS Origine de l'arrière-plan

Propriété CSS background-origin

La propriété CSS background-origin spécifie la position de l'image d'arrière-plan.

Cette propriété peut avoir l'une des valeurs suivantes :

padding-box - L'image d'arrière-plan commence à partir du coin supérieur gauche du bord de remplissage. C'est la valeur par défaut.
border-box - L'image d'arrière-plan commence à partir du coin supérieur gauche du bord de la bordure.
content-box - L'image d'arrière-plan commence à partir du coin supérieur gauche du bord de contenu.

Remarque : Cette propriété n'a aucun effet si la propriété background-attachment est définie sur "fixed".

L'exemple suivant illustre la propriété background-origin :

Exemple

 #div1 { 
 border: 2px solid black; 
 padding: 35px; 
 background-image: url(img_flwr.gif); 
 background-repeat: no-repeat; 
 background-origin: padding-box; 
 } 
 
 #div2 { 
 border: 2px solid black; 
 padding: 35px; 
 background-image: url(img_flwr.gif); 
 background-repeat: no-repeat; 
 background-origin: border-box; 
 } 
 
 #div3 { 
 border: 2px solid black; 
 padding: 35px; 
 background-image: url(img_flwr.gif); 
 background-repeat: no-repeat; 
 background-origin: content-box; 
 } 

Essayez-le vous-même »

Propriétés avancées d'arrière-plan CSS

Propriété	Description
background	Une propriété abrégée pour définir toutes les propriétés d'arrière-plan en une seule déclaration.
background-clip	Spécifie la zone de peinture de l'arrière-plan.
background-image	Spécifie une ou plusieurs images d'arrière-plan pour un élément.
background-origin	Spécifie où l'image d'arrière-plan est ou les images d'arrière-plan sont positionnées.
background-size	Spécifie la taille de l'image d'arrière-plan.