Le image de fond La propriété en CSS est utilisée pour définir une image comme arrière-plan d'un élément. En utilisant cette propriété CSS, nous pouvons définir une ou plusieurs images d’arrière-plan pour un élément.

Par défaut, l'image est positionnée dans le coin supérieur gauche d'un élément et répétée horizontalement et verticalement. L'image d'arrière-plan doit être choisie en fonction de la couleur du texte. La mauvaise combinaison de texte et d’image d’arrière-plan peut être à l’origine d’une page Web mal conçue et illisible.

Le URL() La valeur de cette propriété nous permet d'inclure un chemin de fichier vers n'importe quelle image. Il affichera l'arrière-plan de l'élément. Nous pouvons utiliser plusieurs images ou un mélange de dégradés et d'images pour l'arrière-plan. Si le chargement de l'image d'arrière-plan échoue ou si nous utilisons les dégradés, mais qu'ils ne sont pas pris en charge sur le navigateur correspondant, nous pouvons alors utiliser la valeur de repli (la valeur utilisée comme substitution) comme couleur d'arrière-plan de l'élément.

différence entre $ et $$

Syntaxe

 background-image: url(); 

Valeurs

URL() : C'est l'URL de l'image. Nous pouvons séparer les URL par une virgule si nous voulons spécifier plus d'une image.

python nouvelle ligne

Exemple

 body { background-image: url('cat.webp'); background-color: lightgray; } 

Sortir

Exemple

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 

Sortir

Exemple

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 

Sortir