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

1. Utilisez le background:url() pour définir l’image d’arrière-plan en CSS
2. Utilisez le chemin relatif /image/picture pour définir l’image d’arrière-plan dans CSS
3. Utilisez le chemin relatif ../image/picture pour définir l’arrière-plan en CSS

Cet article présente des méthodes pour définir des images d’arrière-plan en CSS. Nous verrons comment définir le chemin de l’image pour que l’image d’arrière-plan s’affiche correctement. De plus, nous discuterons des différents chemins relatifs.

Utilisez le background:url() pour définir l’image d’arrière-plan en CSS

Nous pouvons utiliser la propriété background pour définir l’image de fond en CSS. La fonction URL() contiendra le chemin du fichier de l’image comme image d’arrière-plan. La propriété background est le raccourci de plusieurs autres propriétés associées à l’arrière-plan. Ces propriétés dans l’ordre sont background-color, background-image, background-repeat, background-attachement et background-position. En utilisant la propriété background, nous pouvons assigner les valeurs de toutes ces propriétés de manière courte.

Le point critique où l’on peut se tromper est lors de l’écriture du chemin de l’image dans la fonction URL(). Nous devons être conscients de l’emplacement de l’image et le chemin qui est écrit dans la fonction URL() doit être relatif au fichier CSS. Si nous écrivons le CSS dans le fichier HTML lui-même, le chemin doit être relatif au fichier HTML.

Dans l’exemple ci-dessous, l’image nommée picture se trouve dans le dossier image. Le dossier image et le fichier CSS suivant style.css se trouvent dans le même dossier. Par conséquent, le code suivant définira l’image d’arrière-plan.

La structure des dossiers est illustrée ci-dessous :

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

Exemple de code :

body {
    background: url(image/picture);
}

Utilisez le chemin relatif /image/picture pour définir l’image d’arrière-plan dans CSS

Nous pouvons utiliser le format de chemin de fichier /image/picture pour définir l’image de fond en CSS. Dans un tel format, l’image se trouve à l’intérieur du dossier image. Le dossier image est situé à la racine du site Web courant.

Dans l’exemple ci-dessous, nous avons défini l’image picture comme image de fond. L’emplacement du fichier CSS n’a pas d’importance dans ce format. Nous n’avons pas besoin d’écrire le chemin du fichier relatif au fichier CSS. Le chemin du fichier est écrit par rapport à la racine du site Web actuel. Cela signifie que le dossier image se trouve dans le répertoire racine.

Exemple de code :

body {
    background: url(/image/picture);
}

Utilisez le chemin relatif ../image/picture pour définir l’arrière-plan en CSS

On peut revenir à un niveau dans une structure de répertoire en utilisant la notation ../. La notation ../ peut être utilisée pour écrire le chemin relatif du fichier dans la fonction URL() tout en définissant le fond en CSS.

Par exemple, nous avons un fichier HTML test.html dans le dossier html. Le dossier html se trouve à l’intérieur du dossier web. L’image picture se trouve à l’intérieur du dossier image à l’intérieur du dossier web. Dans une telle structure de répertoires, nous pouvons utiliser le code suivant pour définir l’arrière-plan.

La structure des dossiers est illustrée ci-dessous :

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

Dans l’exemple ci-dessous, nous avons écrit le CSS dans le fichier HTML lui-même. La notation ../ nous ramène au dossier web à partir du dossier html. Ensuite, il trouve le dossier image puis le fichier picture à l’intérieur du dossier image. De cette façon, nous pouvons définir l’image de fond en CSS en utilisant le chemin relatif.

Exemple de code :

body {
    background: url(../image/picture);
}