CSS Découpe de Fond

Propriété CSS background-clip

La propriété CSS background-clip définit jusqu'où l'arrière-plan (couleur, image ou dégradé) doit s'étendre à l'intérieur d'un élément.

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

border-box - L'arrière-plan s'étend derrière la bordure. C'est la valeur par défaut.
padding-box - L'arrière-plan s'étend jusqu'au bord intérieur de la bordure.
content-box - L'arrière-plan s'étend jusqu'au bord de la boîte de contenu.

Exemple

Utilisation de la propriété background-clip avec une image d'arrière-plan :

 #div1 { 
 border: 5px dotted black; 
 padding: 35px; 
 background-image: url(paper.gif); 
 background-clip: border-box; 
 } 
 
 #div2 { 
 border: 5px dotted black; 
 padding: 35px; 
 background-image: url(paper.gif); 
 background-clip: padding-box; 
 } 
 
 #div3 { 
 border: 5px dotted black; 
 padding: 35px; 
 background-image: url(paper.gif); 
 background-clip: content-box; 
 } 

Essayez-le vous-même »

Exemple

Utilisation de la propriété background-clip avec une couleur d'arrière-plan :

 #div1 { 
 border: 5px dotted black; 
 padding: 35px; 
 background-color: lightblue; 
 background-clip: border-box; 
 } 
 
 #div2 { 
 border: 5px dotted black; 
 padding: 35px; 
 background-color: lightblue; 
 background-clip: padding-box; 
 } 
 
 #div3 { 
 border: 5px dotted black; 
 padding: 35px; 
 background-color: lightblue; 
 background-clip: 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/les images d'arrière-plan sont positionnées.
background-size	Spécifie la taille de l'image d'arrière-plan.