Module 9 : Les images de fond

Une boîte peut porter une image

Depuis le module 5, tu peins le fond de tes boîtes avec background-color. Une couleur, unie, d'un bord à l'autre.

Une boîte peut aussi porter une image. La photo du lac derrière le nom du club, un motif discret derrière une page, un petit soleil dans le coin d'un encart : tout ça, c'est le fond de la boîte. Le contenu — titres, textes, liens — se pose par-dessus.

<header class="banniere">
    <h1>Club photo</h1>
</header>

.banniere {
    background-image: url("/images/fonds/lac.svg");
    background-size: cover;
    background-position: center;
    padding: 64px 16px;
}

.banniere h1 {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    text-align: center;
}

Quatre propriétés ont fait ce travail, et ce module les prend une par une. À la fin, tu sais écrire chacune de ces lignes, et surtout pourquoi elle est là.

Image de fond ou balise <img> ?

Au module 2, tu as affiché des images avec <img>. Alors pourquoi une deuxième façon ? Parce qu'elles ne disent pas la même chose.

• <img> est du contenu. Elle fait partie de ce que la page raconte : la photo du gagnant du concours, le plan d'accès, le portrait de l'équipe. Elle porte un texte alternatif, et un lecteur d'écran l'annonce.
• Une image de fond est du décor. Elle n'a pas de texte alternatif, pas d'existence pour un lecteur d'écran. Si elle disparaît, la page doit dire exactement la même chose.

♿ Le test est simple : cache l'image. Manque-t-il une information ? Si oui, c'est une <img> avec son alt. Si non, le fond est la bonne place. Une information placée en image de fond n'existe pas pour une personne aveugle.

Le plan du module

1. background-image — poser une image, et découvrir qu'elle se répète toute seule
2. background-repeat — décider si elle se répète, et dans quel sens
3. background-position — la placer où tu veux dans la boîte
4. background-size — l'adapter à la boîte, avec cover et contain
5. Le texte sur une image — le garder lisible, quelle que soit la photo
6. Le défi : la bannière d'accueil du club photo, de A à Z

Les quatre propriétés commencent toutes par background-. Elles ne règlent que le fond : le padding, la bordure et la marge du module 8 restent ce qu'ils sont.

Prêt ?

Les cartes du club photo ont trouvé leur forme au module 8. Elles vont maintenant trouver leur décor. C'est parti !