Range l'icône dans son coin

🎯 Objectif

Placer une image de fond où tu veux dans sa boîte avec background-position.

📖 Exemple

Le panneau météo de la plage pose son soleil au milieu, tout en haut — le code, et ce que le navigateur en fait :

<div class="meteo">
    <h2>Grand beau</h2>
    <p>28 degrés, eau à 22. Crème solaire obligatoire.</p>
</div>

.meteo {
    background-image: url("/images/fonds/soleil.svg");
    background-repeat: no-repeat;
    background-position: center top;
    padding: 72px 16px 16px 16px;
    text-align: center;
}

Une image qui ne se répète pas se pose par défaut en haut à gauche. La propriété background-position la déplace avec deux mots-clés :

• le premier règle l'horizontale : left, center ou right
• le second règle la verticale : top, center ou bottom

Ici, center top : au milieu de la largeur, tout en haut. Le padding du haut garde la place du soleil, et le texte, centré, tombe juste dessous.

⚠️ Un seul mot-clé ne suffit pas : le navigateur remplace le mot manquant par center.

📝 Consigne

L'encart de l'expo réserve cette fois la place de l'icône à droite : regarde son padding. Mais l'appareil photo est resté en haut à gauche, sous le texte.

Dans la règle de la classe encart, ajoute une seule déclaration : la propriété background-position, avec les deux mots-clés qui envoient l'icône dans le coin en haut à droite.