Ajouter une image de fond en CSS
- Ajouter une image d’arrière-plan dans CSS lorsque l’image et le fichier CSS se trouvent dans le même dossier
- Ajouter un arrière-plan dans l’image CSS lorsque l’image, les fichiers HTML et CSS se trouvent dans un dossier différent
Ce tutoriel présente comment ajouter des images d’arrière-plan en CSS. Il expliquera également quelles sont les erreurs courantes lors de l’ajout d’images d’arrière-plan.
Ajouter une image d’arrière-plan dans CSS lorsque l’image et le fichier CSS se trouvent dans le même dossier
Nous pouvons créer des images d’arrière-plan en CSS en utilisant la propriété background-image. Ensuite pour la valeur, on peut utiliser la fonction url() où le nom de l’image ou le chemin de l’image est le paramètre. La propriété doit être écrite après avoir sélectionné la balise body dans le CSS. Cela activera l’image d’arrière-plan dans tout le corps de la page Web. Nous devons écrire le nom et le chemin de l’image en fonction de la structure des dossiers du fichier HTML, CSS et image. Nous expliquerons quelques scénarios de différents emplacements d’image par rapport aux fichiers HTML et CSS.
Si l’image et le fichier CSS se trouvent dans le même répertoire, on peut simplement écrire le nom de l’image dans la fonction url(). Par exemple, nous avons l’image bird.jpg dans un répertoire. Nous avons un fichier CSS style.css dans le même répertoire ; le code suivant définira l’image d’arrière-plan.
Exemple de code :
body{
background-image:url(bird.jpg);
}
De plus, nous devons nous assurer que le chemin de fichier relatif des fichiers HTML et CSS doit être correct. Si CSS est écrit en interne en HTML, les fichiers image et HTML doivent se trouver dans le même répertoire. S’ils ne sont pas dans le même répertoire, le chemin relatif du fichier CSS doit être correct dans le fichier HTML.
Ajouter un arrière-plan dans l’image CSS lorsque l’image, les fichiers HTML et CSS se trouvent dans un dossier différent
Supposons que nous ayons un dossier HTML nommé index.html, un fichier CSS nommé style.css, et l’image nommée bird.jpg. Le fichier HTML se trouve dans un dossier html, le fichier CSS se trouve dans le dossier css et l’image se trouve dans le dossier image. Dans une telle structure de fichier, nous devons être conscients de la manière dont nous devons donner le chemin relatif du fichier CSS et de l’image afin que l’image d’arrière-plan soit affichée. Tout d’abord, nous devons nous assurer que les fichiers HTML et CSS sont liés. Le code suivant lie le fichier HTML et CSS à la structure de dossiers indiquée ci-dessus.
Exemple de code :
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
Le symbole ../ indique un pas en arrière par rapport au dossier actuel. Lorsque nous reculons d’un pas depuis le dossier html où se trouve le index.html, nous atteignons le dossier parent où se trouve le dossier css. Ensuite, nous pouvons trouver le fichier style.css dans le dossier css. Maintenant, nous devons fournir le chemin relatif de bird.jpg de la même manière dans le fichier CSS.
Comme le dossier image se trouve à un pas du fichier CSS actuel, ../ nous ramènera au dossier parent. Ensuite, il récupère le dossier image où se trouve bird.jpg. Ainsi, nous pouvons définir l’image de fond en CSS sans défaut.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn