On utilise la propriété background-image.

.header { 
  background-image: url(../img/image.jpg); 
}

<aside> ⚠️ Le fichier CSS se trouvant dans le dossier css, il faut d'abord sortir du dossier avec .. avant d'entrer dans le dossier img.

</aside>

Taille de l'élément HTML

Lorsque l'image est intégrée en CSS, elle n'influe pas sur la taille de l'élément HTML. La taille de l'élément est donc soit définie en CSS, soit définie par son contenu.

Par exemple:

<div class="header"></div>

.header { 
  background-image: url(../img/image.jpg); 
}

<aside> 👉 Le div header aura une hauteur de 0px. L'image ne sera donc pas visible.

</aside>

.header { 
  height: 100px 
  background-image: url(../img/image.jpg); 
}

<aside> 👉 Le div header aura une hauteur de 100px. L'image sera donc visible, au moins en partie.

</aside>

<aside> ⬅️ Intégration des images en HTML

</aside>

<aside> ➡️ Répétition de l’image

</aside>