Introduction

Dans cet exercice, vous ne devez modifier le HTML que si l'énoncé vous le demande explicitement, et vous ne devez pas modifier l'emplacement des fichiers (sauf si l'énoncé vous le demande).

En revanche, n'hésitez pas à regarder le contenu du HTML, ça peut aider !

Lier la feuille de style

Modifier l'élément link dans l'en-tête de cette page pour y associer la feuille de style, en utilisant un chemin relatif (l'URL ne doit commencer ni par https:, ni par un slash). Tant que les couleurs n'ont pas changé, c'est que ça n'a pas marché ; inutile de continuer !

Une règle pour les boîtes

Toutes les boîtes ci-dessous sont des div avec une classe box. Le CSS utilise cette classe pour leur donner une bordure, des marges/paddings, et des dimensions fixées.

Ajoutez une nouvelle règle à la fin du fichier CSS pour que toutes les boîtes aient la couleur de fond gold, grâce à la propriété background-color.

Ajouter une image de fond

On va maintenant ajouter comme image de fond à nos boîtes l'image suivante, dont le chemin relatif à partir de ce fichier HTML est ui/img/champi.png.

Pour ajouter une image de fond en CSS, il faut utiliser la propriété background-image: url('blabla');, où blabla est l'URL de l'image.

Utilisez cette propriété dans la règle pour mettre le champignon en image de fond de toutes les boîtes, en utilisant un chemin relatif comme URL. Attention, les chemins relatifs dans le CSS sont résolus par rapport au chemin du fichier CSS, pas du fichier HTML !

Notez que l'image est répétée pour tapisser entièrement les boîtes, et qu'on voit par ailleurs la couleur de fond derrière l'image de fond (car elle est partiellement transparente).

Normalement, inverser l'ordre des deux propriétés dans notre règle ne devrait rien changer au résultat. Vérifiez-le (en n'oubliant pas de faire un hard reload). Si le résultat change, vous avez peut-être utilisé la propriété raccourci background : changez-la.

Taille de l'image de fond

La taille des images de fond en CSS est contrôlée par la propriété background-size. Allez regarder la page de MDN sur cette propriété, et notamment l'exemple interactif au début. Utilisez cette page comme référence pour répondre aux questions suivantes.

Notez que chaque boîte a un identifiant distinct, ce qui permet de la cibler précisément depuis le CSS. Les autres boîtes de la page ne doivent pas changer !

1. Dans la boîte ci-dessous, d'identifiant pixels, faites en sorte que chaque champignon prenne 100 pixels de largeur et 50 pixels de hauteur.
   une boîte avec des champignons déformés
2. Dans la boîte ci-dessous, d'identifiant pourcents, faites en sorte qu'il y ait exactement quatre champignons en largeur et deux champignons en hauteur.
   une boîte avec huit champignons
3. Dans la boîte ci-dessous, d'identifiant etire, faites en sorte qu'il y ait exactement un seul champignon, étiré pour prendre toute la largeur et toute la hauteur.
   une boîte avec un seul champignon (déformé)
4. Dans la boîte ci-dessous, d'identifiant couvrant, utilisez le mot-clef cover comme valeur de background-size.
   une boîte couverte par un seul champignon non déformé

Répétition de l'image de fond

Les boîtes ci-dessous sont dans un élément article. Ajouter une règle CSS pour que ces boîtes-là (mais pas les précédentes !) aient la couleur de fond aquamarine.

Ajoutez ensuite une propriété background-repeat à votre règle, et testez les valeurs présentées dans la doc de background-repeat sur MDN. Pour finir, choisir la valeur qui supprime toute répétition.

Position de l'image de fond

Les boîtes ci-dessous sont également dans un article. Si tout s'est bien passé, elles doivent avoir comme image de fond un seul champignon, collé en haut à gauche. On va maintenant modifier sa position avec background-position : allez regarder la page de MDN sur cette propriété, et aidez-vous-en pour répondre aux questions suivantes.

NB: une nouvelle fois, chaque boîte a un identifiant distinct — utilisez-le depuis le CSS, afin que les autres boîtes de la page ne soient pas impactées.

Décorer un texte avec une image de fond

Par définition, le texte d'un élément se retrouvera par-dessus le background de l'élément en question. Cependant, il est possible de tricher pour placer l'image de fond à côté du texte : il suffit de décaler le texte avec un padding.

L'encadré suivant est un aside de classe info.

1. Ajoutez une règle ciblant la classe info pour lui mettre un fond blanc ainsi que notre champignon en image de fond, sans répétition.
2. Faites en sorte que le champignon soit centré horizontalement, à 1em du haut du cadre, et qu'il fasse 2em par 2em. Il devrait se retrouver derrière le titre de notre encadré.
3. Maintenant, toujours dans la même règle, mettez un padding de 3em en haut et 0.5em aux trois autres côtés.

Constatez que notre image de fond n'en est plus vraiment une : c'est plutôt une sorte d'icône. Pour obtenir ce résultat, on aurait pu mettre l'image dans le HTML avec un élément img, mais c'est moins approprié — c'est une image purement décorative, elle est à sa place dans le CSS !

Optionnel : propriété raccourcie background

Allez voir la doc de la propriété raccourcie background, qui permet de déclarer tous les aspects des images de fond en une seule propriété.

Commentez la règle écrite dans la section précédente et réécrivez-en une qui soit équivalente en n'utilisant que deux propriétés, background et padding.

Optionnel : images de fond multiples

Toutes les propriétés sur les backgrounds peuvent en réalité définir plusieurs images de fond (il suffit de les séparer par des virgules, voir la doc). Elles seront empilées les unes sur les autres, la première de la liste étant devant et la dernière la plus derrière.

Utilisez cette possibilité pour mettre deux fois l'image du champignon comme fond de l'encadré suivant, d'identifiant double. Celle de devant ne doit pas être répétée, doit être centrée et faire 200×200 pixels. Celle de derrière doit être répétée et la largeur de chaque champignon doit faire un dixième de la largeur de la boîte, sans déformation.