Image d'arrière-plan HTML-CSS ne s'affiche pas

CSS propose de nombreuses propriétés de style pour les éléments HTML. Plus précisément, l'ajout d'images d'arrière-plan utilisant CSS est l'une des tâches de conception importantes. Cependant, travailler avec des images d'arrière-plan peut parfois être difficile. En effet, plusieurs autres facteurs peuvent empêcher l'image d'arrière-plan de s'afficher.

Ce message couvrira ce qui suit:

• Comment régler correctement l'URL de l'image?
• Comment définir la taille de l'élément parent de l'image?
• Comment lier correctement le fichier CSS?
• Comment définir CSS "arrière-plan" propriétés?

Comment régler correctement l'URL de l'image?

L'image d'arrière-plan ne se charge pas sur le navigateur si l'URL de l'image est incorrecte. Analyser l'exemple discuté ci-dessous pour connaître le problème avec la solution pertinente.

Exemple

En html, ajoutez un ""Element et attribuez-le la classe"bannière-IMG»:

Classe de style «bannière-IMG»

.bannière-IMG
Largeur: 400px;
hauteur: 300px;
Image d'arrière-plan: URL (/ IMG / Light-Bulbs-5488573_1920.jpg);
taille arrière: couverture;

Selon l'extrait de code donné:

• "largeur»Détermine l'étendue de l'élément.
• "hauteur"Ajuste la hauteur de l'élément.
• "image de fond»Spécifie l'URL de l'image.
• "taille de l'arrière-plan"Avec la valeur"couverture”S'adapte à l'image dans tout le conteneur.

Sortir

Si vous ajoutez l'URL de l'image erronée comme mentionné dans le bloc de code ci-dessous, l'erreur 404 se produira:

.bannière-IMG
Largeur: 400px;
hauteur: 300px;
Image d'arrière-plan: URL (/ img / bulbes-5488573_1920.jpg);
taille arrière: couverture;

Cliquez avec le bouton droit sur la page Web et sélectionnez le «inspecter”Option, la fenêtre d'outil du développeur affichera l'état de la ressource:

Comment définir la taille de l'élément parent de l'image?

Parfois, l'image ne se charge pas sur la page Web si la taille de son élément parent n'est pas définie.

Analyser l'exemple ci-dessous.

Exemple

Ajouter un ""Element et attribuez-le la classe"bannière»:

.contenu
Image d'arrière-plan: URL (/ IMG / Light-Bulbs-5488573_1920.jpg);
taille arrière: couverture;
Largeur: 400px;
hauteur: 500px;

Ici:

• "image de fond"Définit l'URL de l'image d'arrière-plan.
• "taille de l'arrière-plan"Définit la taille de l'image. Plus précisément, le «couverture»La valeur couvre l'ensemble du conteneur.

Sortir

Comment lier correctement un fichier CSS?

Si vous utilisez la feuille de style externe, assurez-vous que le «»L'élément doit être correctement spécifié. Le nom de fichier doit être correctement spécifié dans le «href" attribut:

Comment définir les propriétés de «fond» CSS?

Le CSS "arrière-plan«Les propriétés doivent être correctement spécifiées aux éléments:

.bannière-IMG
marge: auto;
Largeur: 400px;
hauteur: 250px;
Image d'arrière-plan: URL (/ IMG / Light-Bulbs-5488573_1920.jpg);
taille arrière: couverture;
Position d'arrière-plan: Centre;
République de fond: sans répétition;

Ici:

• "image de fond»Spécifie l'URL de l'image d'arrière-plan.
• "taille de l'arrière-plan”Définit la taille de l'image d'arrière-plan.
• "position de fond»Ajuste la position de l'image d'arrière-plan.
• "Répétition du fond»Détermine si l'image est répétée ou non.

Le CSS "arrière-plan»La propriété peut être spécifiée comme une propriété scolarisée comme celle-ci:

Contexte: URL (/ IMG / Light-Bulbs-5488573_1920.JPG) Centre / Cover sans répétition;

Note: La position d'arrière-plan et la taille de l'arrière-plan doivent être séparées par le «/ /”Slash comme mentionné dans le bloc de code ci-dessus. Sinon, il n'affichera pas l'image.

Pour vérifier, inspecter la page et observer la fenêtre de l'outil de développeur, vous verrez ce qui suit:

Ce sont les raisons et les correctifs pour l'image d'arrière-plan CSS n'affichant pas de problème.

Conclusion

Pour charger correctement l'image d'arrière-plan, de nombreux facteurs doivent être pris en compte. Il s'agit notamment de définir correctement l'URL de l'image, de régler la largeur et la hauteur de l'élément parent, y compris correctement le lien de la feuille de style externe et spécifiant le CSS "arrière-plan»Propriétés correctement. Cet article a expliqué les correctifs pour les images d'arrière-plan qui n'affichent pas le problème.