Pour définir une image derrière l'élément, le «image de fond«La propriété de CSS entre en jeu. Par défaut, il apparaît dans le coin supérieur gauche de l'écran et est répété horizontalement et verticalement. Vous pouvez également ajouter plus d'une image en arrière-plan de l'élément HTML; De plus, définissez la largeur et la hauteur de l'image selon vos préférences. Cependant, vous pouvez également arrêter la répétition de l'image.

Cet article fournira les résultats d'apprentissage suivants:

• • propriété d'image d'arrière-plan
  • Comment définir une image d'arrière-plan

Propriété CSS «Image de fond»

Le "image de fond»La propriété est utilisée pour appliquer une image à l'arrière-plan d'une balise spécifié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 d'image ();

Ici, l'image URL () a le nom d'image ou le chemin du dossier d'image dans lequel il existe.

Essayons un exemple pour avoir une meilleure compréhension.

Exemple: comment définir une image d'arrière-plan à l'aide de CSS?

Dans cet exemple, premièrement, nous créerons deux autres éléments (

et

Tags), derrière lequel l'image d'arrière-plan sera ajoutée. Vous pouvez ajouter des éléments en fonction de votre choix et y appliquer la propriété d'image en arrière-plan:

Définir l'image d'arrière-plan

Pour définir l'image d'arrière-plan Utilisez la propriété d'image d'arrière-plan CSS

Vous pouvez ajouter des éléments en fonction de votre choix et y appliquer une propriété d'image d'arrière-plan.

Passez au CSS et attribuez le nom de l'image dans «image de fond”URL:

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

Une fois que vous avez terminé toutes les étapes, exécutez le fichier HTML, vous obtiendrez le résultat suivant:

Ici, vous pouvez voir que l'image d'arrière-plan est répétée. Pour éviter cela, utilisez le «Répétition du fond«Propriété et définissez sa valeur sur«sans répétition»:

corps
Image d'arrière-plan: URL ("IMG.jpg ");
République de fond: sans répétition;

Une fois que tout est terminé, exécutez le code et consultez votre page Web:

Maintenant, vous avez un aspect propre et élégant de l'image d'arrière-plan définie sur la balise.

Bonnes pratiques pour définir des images d'arrière-plan

• • Sélectionnez une image pour correspondre à la couleur de votre texte.
  • Utilisez des combinaisons de couleurs attrayantes.
  • Si votre image d'arrière-plan et votre couleur de texte ne se correspondent pas, votre page Web est mal conçue.

Conclusion

Pour ajouter une image d'arrière-plan dans CSS, utilisez le «image de fond”Propriété et donnez l'URL de l'image dans la fonction URL () de CSS. Vous pouvez également empêcher votre image de répéter en utilisant le «Répétition du fond«Property et définir sa valeur sur«aucun". Cet article a expliqué la procédure pour ajouter une image à l'arrière-plan en utilisant le «image de fond" et "Répétition du fond" propriétés.