Par défaut, sur une page Web, une image apparaît dans le coin supérieur gauche de l'écran et est répétée horizontalement et verticalement. Cependant, pour modifier sa position actuelle, CSS propose un «position de fond»Propriété qui spécifie la position de l'image d'arrière-plan, comme le centre.

Dans cet article, nous apprendrons à définir la position d'une image de fond à l'aide d'exemples. Pour ce faire, premièrement, nous démontrerons la procédure d'ajout d'une image comme arrière-plan dans CSS.

Ajouter des images d'arrière-plan à l'aide de la propriété «Image d'arrière-plan»

Pour ajouter des images en arrière-plan, le «image de fond»La propriété est utilisée.

Syntaxe

Voici la syntaxe pour définir une image d'arrière-plan sur un élément HTML:

Image d'arrière-plan: url ();

Ici, "URL ()»Spécifie le nom du nom ou du dossier de l'image dans lequel il existe.

Maintenant, passez à l'exemple pratique de l'utilisation de la propriété d'image d'arrière-plan.

Exemple: insertion d'une image d'arrière-plan à l'aide de CSS

Dans cet exemple, nous créerons un

élément et fond seront ajoutés derrière cet élément. Vous pouvez ajouter des éléments en fonction de votre choix et y appliquer la propriété d'image d'arrière-plan:

Linuxhint

Après cela, passez au CSS, utilisez le «image de fond«Propriété, affectez le chemin d'image ou le nom dans l'AS«URL ()”Valeur de la propriété d'image d'arrière-plan:

corps
Image d'arrière-plan: URL ("IMG.jpg ");

Cela donnera le résultat suivant:

C'est ainsi que vous pouvez ajouter une image d'arrière-plan dans CSS.

Comment centrer des images d'arrière-plan à l'aide de la propriété CSS «Position d'arrière-plan»?

Le "position de fond»La propriété définit la position de l'image d'arrière-plan. La syntaxe sera la suivante:

Position d'arrière-plan: valeur

La position de l'image peut être spécifiée comme absolue, gauche ou droite. Plus précisément, la définition du «centre"La valeur centrera l'image d'arrière-plan ajoutée.

Maintenant, passons à l'exemple pratique qui montre comment utiliser les propriétés d'image-image et de position d'arrière-plan dans CSS.

Exemple: comment définir l'image d'arrière-plan au centre?

Nous définirons la couleur d'arrière-plan et le chemin d'image avec le «arrière-plan" propriété. Ensuite, nous utiliserons le «position de fond»Propriété pour définir l'image d'arrière-plan au centre. Enfin, nous allons définir le «Répétition du fond”Propriété à sans répétition pour ne pas avoir répété l'image:

corps
Contexte: RVB (128, 44, 12) URL ("Image.jpg ") fixe;
Position d'arrière-plan: Centre;
République de fond: sans répétition;

Une fois que tout est terminé, exécutez le code et jetons un coup d'œil au résultat final:

Notre image d'arrière-plan est positionnée avec succès au centre de la page.

Conclusion

Des images d'arrière-plan peuvent être ajoutées en utilisant la propriété d'image d'arrière-plan, tandis que la position d'arrière-plan peut être définie à l'aide de la propriété de position d'arrière-plan. Au centre, l'image d'arrière-plan dans CSS définit la valeur de la propriété de position d'arrière-plan à «centre". L'article explique en détail comment ajouter une image à l'arrière-plan en utilisant «image de fond»Et comment définir sa position en utilisant le«position de fond" propriété.