Une image derrière le texte

🎯 Objectif

Poser une image de fond sur une boîte avec background-image.

📖 Exemple

L'étiquette d'une boîte à biscuits, sur un damier bleu pâle — le code, et ce que le navigateur en fait :

<div class="etiquette">
    <h2>Biscuits de grand-maman</h2>
    <p>Beurre, noisettes et un peu de patience.</p>
</div>

.etiquette {
    background-image: url("/images/fonds/motif-carreaux.svg");
    padding: 24px;
}

La propriété background-image attend une image. La fonction url() lui donne son adresse : le chemin du fichier, entre guillemets, entre parenthèses. Le chemin commence par une barre oblique, comme le src d'une <img> au module 2 : on part de la racine du site.

Regarde maintenant le damier. Le fichier ne mesure que 32 pixels sur 32, et l'étiquette est bien plus grande. Le navigateur ne l'étire pas : il le répète, comme un carrelage, jusqu'à couvrir toute la boîte. C'est le comportement par défaut.

Dernier détail, et il compte : le texte se pose par-dessus le fond, sans bouger. Une image de fond ne prend aucune place dans la boîte.

💡 Derrière du texte, choisis toujours un motif pâle et peu contrasté. Un damier noir et blanc rendrait chaque lettre illisible.

📝 Consigne

La carte du club photo a déjà son padding, sa bordure et ses coins arrondis. Il lui manque son décor.

Dans la règle de la classe carte, ajoute une seule déclaration : une image de fond, le fichier /images/fonds/motif-pois.svg. Recopie le chemin tel quel.