Les images de fond¶

Appliquer une image de fond à un élément HTML est facile avec la propriété background-image.

Ajouter une image de fond¶

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

➡️ Cela applique l’image "image.jpg" en fond du <body>.

Éviter la répétition¶

Par défaut, l’image se répète pour remplir l’espace. Pour éviter cela :

body {
    background-image: url("../img/image.jpg");
    background-repeat: no-repeat;
}

Positionner l'image¶

Tu peux choisir où placer l’image dans l’élément :

body {
    background-image: url("../img/image.jpg");
    background-position: center;
}

Autres valeurs utiles :

top left
bottom right
center center

➡️ Très utile lorsque ton image ne couvre pas toute la page pour positionner l’image selon tes besoins.

Définir la taille de l'image¶

Pour que l'image couvre l'espace de la balise associée :

body {
    background-image: url("../img/image.jpg");
    background-size: cover;
}

Options :

cover : remplit tout l’espace, peut rogner l’image
contain : affiche toute l’image sans la rogner
50%: largeur et hauteur personnalisées

Rendre l'image fixe (pas de défilement)¶

Pour que l’image reste en place quand on fait défiler la page :

body {
    background-image: url("../img/image.jpg");
    background-attachment: fixed;
}

➡️ L’image reste figée pendant le défilement de la page.

Exemple complet¶

body {
  background-image: url("../img/fond.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

Image de fond sur un bloc¶

Appliquer une image de fond sur un bloc fonctionne de la même façon : avec l'attribut background-image.

taille du bloc

Un bloc prend uniquement la hauteur nécessaire pour afficher son contenu. Donc l'image de fond qui n'a pas les bonnes dimensions ne s'affichera pas complètement si le contenu n'est pas suffisamment grand.

Exemple :

Fond

Il faut donc ajouter une marge intérieure pour agrandir le bloc :

header{
  background-image:url(../img/header.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

Fond

💡 Astuce : Utilise des images légères et bien optimisées pour ne pas ralentir le chargement de ta page.

Effet parallax¶

L'effet parallax se produit lorsque :

La page défile
Un bloc de la page possède une image de fond avec positionnement fixe (qui ne défile pas)

Pour y arriver on doit :

Avoir un bloc avec une hauteur définie
```
div {
    min-height: 75vh; /*Hauteur minimale de 75% de l'écran*/
}
```
Ceci crée une "fenêtre" sur l'image qui sera mise en fond.
Appliquer une image de fond fixe sur le bloc

```css div { min-height: 75vh; /Hauteur minimale de 75% de l'écran/
```
background-image: url(../images/planche_essai.jpg);
background-size: cover;
background-attachment: fixed;
```
} ```

Ainsi, lorsque la page défile, le bloc va défiler avec la page mais l'image sera collée en fond et le bloc agira comme une fenêtre sur l'image.

parallax