Une seule fois, s'il te plaît

🎯 Objectif

Décider si une image de fond se répète, et dans quel sens, avec background-repeat.

📖 Exemple

Le journal du camp d'été affiche une frise de soleils au-dessus de son titre — le code, et ce que le navigateur en fait :

<div class="journal">
    <h2>Journal du camp</h2>
    <p>Jour 3 : baignade, puis concours de cabanes.</p>
</div>

.journal {
    background-image: url("/images/fonds/soleil.svg");
    background-repeat: repeat-x;
    padding: 72px 16px 16px 16px;
}

Sans la deuxième ligne, les soleils couvriraient toute la boîte, sous le texte. La valeur repeat-x limite la répétition à l'horizontale : une seule rangée, tout en haut, comme une frise. Le padding du haut, 72 pixels, garde la place de la rangée pour que le titre ne s'y colle pas.

La propriété background-repeat connaît quatre valeurs :

• repeat — dans les deux sens, c'est le défaut
• repeat-x — seulement à l'horizontale
• repeat-y — seulement à la verticale
• no-repeat — pas du tout : l'image n'apparaît qu'une fois

📝 Consigne

L'encart de l'atelier retouche a reçu une icône d'appareil photo en image de fond. Problème : elle se répète partout, jusque sous le texte.

Dans la règle de la classe encart, ajoute une seule déclaration : la propriété background-repeat, avec la valeur qui interdit toute répétition.