Dans cette leçon vidéo, le formateur explique en détail la gestion des arrière‑plans en CSS. Il commence par la propriété background et ses sous‑propriétés, montre comment appliquer une couleur d’arrière‑plan avec background‑color (y compris la forme abrégée hexadécimale), puis comment insérer une image de fond via background‑image en utilisant un chemin relatif depuis le fichier CSS. Il décrit le comportement de répétition d’une image (background‑repeat : no‑repeat, repeat‑x, repeat‑y, repeat) et la façon de positionner l’image avec background‑position (pourcentages ou mots‑clés). Le formateur aborde ensuite background‑attachment (scroll vs fixed) en illustrant l’effet de défilement du contenu. Enfin, il introduit les dégradés linéaires avec la valeur linear‑gradient, montre la syntaxe (direction to‑bottom, couleurs multiples) et rappelle que la dernière déclaration d’une même propriété écrase la précédente. Tout au long de la vidéo, il montre le résultat dans le navigateur, souligne les valeurs par défaut et les bonnes pratiques, et conclut sur l’utilisation du dégradé comme arrière‑plan.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons traiter les arrière-plans. Tous les objets HTML possèdent des arrière-plans, que ce soit des textes, des images, des formulaires, des conteneurs, bref, tous les objets en possèdent un. Afin de définir un arrière-plan en CSS, on utilise la propriété background. Avec bien sûr les sous-propriétés qui vont avec. Supposons que nous avons le code HTML suivant. Ici nous avons un document qui contient la balise body qu'on a vidée dans un premier temps afin de voir l'effet de l'application de l'arrière-plan sur le body lui-même. Alors il suffit d'aller sur le CSS et mettre ici le sélecteur body et ensuite on va mettre background-color. Ensuite on déclare la couleur avec l'une des méthodes que nous avons vu la dernière fois. Par exemple, on va mettre dièse, l'orange par exemple c'est FF8800, voilà. Et ça va donner ceci. Il y a juste une remarque, c'est que si vous avez une couleur qui contient des octets qui possèdent la même valeur, c'est-à-dire une valeur qui va se dupliquer, comme par exemple FF8800, on peut abréger cette écriture de cette manière: F80. Bon, ça sous-entend qu'ici c'est FF, ici c'est 88, et ici c'est 00. Mais il n'y a pas que des couleurs que l'on peut appliquer aux arrière-plans, on peut aussi appliquer des images. Par exemple, que je veux appliquer une image d'arrière-plan à la balise body. Alors il suffit de déclarer ici background-image et comme valeur je vais définir URL entre parenthèses, j'ouvre des guillemets, ensuite je vais spécifier le chemin vers l'image que je vais appliquer en arrière-plan. On va d'abord voir l'image, elle est située où. Le code HTML, il est sur la page index.html. Le code CSS que je suis en train de saisir, il est dans le dossier CSS, dans un fichier qui s'appelle style.css. Alors que l'image est dans un dossier qui s'appelle images, il s'appelle logo.png. Autrement dit, pour accéder à l'image, il faut mettre un chemin relatif qui commence à partir de l'emplacement du fichier CSS. Ça veut dire il faut d'abord sortir du dossier CSS comme ça, ensuite on va pénétrer dans le dossier images et on sélectionne l'image d'arrière-plan. Alors on va faire ceci dans le code. Alors pour sortir du dossier courant, c'est../ maintenant je suis à la racine, ça veut dire à côté du fichier index.html. Il suffit maintenant d'entrer dans le dossier images, ensuite je vais sélectionner l'image qui s'appelle s'appelle logo.png. J'exécute. Bon, je vais voir que mon image d'arrière-plan a été appliquée de cette manière. Alors je vois qu'il y a la couleur d'arrière-plan et aussi l'image d'arrière-plan. C'est une image PNG, donc elle contient de la transparence, c'est pourquoi elle laisse apparaître l'arrière-plan derrière. Vous constatez sûrement que l'image est répétée horizontalement et verticalement. L'essentiel, c'est qu'il faut que l'image occupe tout l'espace disponible dans le conteneur. Dans ce cas, le conteneur, c'est la balise body. Pour limiter cette répétition, on peut utiliser la propriété background-repeat. Voilà. Et dans ce cas, pour background-repeat, imaginez que je veux pas répéter l'image, c'est-à-dire je veux qu'il soit appliqué une seule fois. Alors il suffit de mettre la valeur no-repeat. Quand j'exécute, l'image de l'arrière-plan est appliquée une seule fois à l'emplacement par défaut, ça veut dire sur le coin haut à gauche. Maintenant, si je veux que l'image se répète horizontalement seulement, alors il suffit de mettre repeat-x, voilà, avec un tiret. Dans ce cas, l'image se répète horizontalement jusqu'à ce qu'elle occupe toute la ligne. Et verticalement, il suffit de mettre repeat-y, voilà. Et la valeur par défaut, c'est repeat. Ça veut dire, si vous déclarez pas background-repeat, alors la valeur par défaut qui sera reprise par le navigateur, c'est repeat. Alors il a tendance à répéter l'image horizontalement et verticalement. Vous avez constaté que l'image est répétée de telle manière à ce que la première image soit appliquée en haut à gauche et ensuite toutes les autres vont l'entourer dans tous les sens afin de remplir l'espace disponible. On appelle ça le positionnement par défaut. Ça aussi c'est une propriété CSS que l'on peut changer grâce à background-position. Background-position, on peut lui donner 2 valeurs. Ça veut dire la valeur sur les X, c'est-à-dire sur l'axe horizontal, et la valeur sur l'axe vertical. On peut faire ça avec des mots-clés comme par exemple center, center, etc. Mais il est préférable d'utiliser les pourcentages parce qu'avec les pourcentages on peut couvrir tous les espaces possibles. Par exemple, on va mettre ici 50%, 50%, et on va les séparer avec un espace blanc. Ici, le premier 50% désigne la position sur les X, ça veut dire sur l'axe horizontal. Autrement dit, que notre image sera centrée horizontalement. Et le deuxième 50%, c'est verticalement, ça veut dire l'image sera centrée horizontalement et verticalement. Et du coup, la première image, elle sera appliquée au centre et toutes les images qui vont se répéter vont entourer cette image-là jusqu'à ce qu'elles couvrent tout l'espace disponible. Voilà, donc là c'est le résultat que nous avons obtenu. La première image appliquée, c'est ça, et ensuite les autres images, elles ont été appliquées tout autour afin de couvrir tout l'espace possible. Il reste aussi une propriété qui s'appelle background-attachment. On va voir son effet. Attachment, bon, par défaut c'est scroll. Ça, c'est la valeur par défaut. Ça veut dire si vous ne déclarez pas background-attachment, attachment, la valeur par défaut c'est scroll. Par contre, la valeur spéciale c'est fixed. Bon, si vous mettez fixed, qu'est-ce qui va changer? Bon, ici on aura rien qui va vraiment changer parce qu'il faut avoir du contenu. Bon, pour mieux voir ce que ça donne, il suffit d'aller sur le HTML et on va essayer de remplir la page avec quelque chose. Par exemple, le titre H1, on va mettre ici titre H1. On va essayer de répéter ça plusieurs fois. L'essentiel c'est qu'on va appliquer ce titre autant de fois que nécessaire jusqu'à l'apparition du scrollbar, ce qu'on appelle la barre de défilement verticale. On actualise et voilà donc la barre de défilement verticale, elle est comme ça. Bon, tout d'abord pour voir l'effet, on va prendre la valeur par défaut, on va mettre scroll, c'est-à-dire que même si vous la déclarez pas explicitement, le navigateur s'en charge, il va l'appliquer automatiquement. Bon, maintenant j'exécute. Alors quand je défile avec la barre de défilement, vous constatez bien que le texte et l'arrière-plan, ils sont attachés l'un à l'autre, c'est-à-dire que tous les deux ils bougent verticalement. Maintenant avec la valeur fixed, regardez ce qui va se passer maintenant quand je fais ça. Vous voyez bien que l'arrière-plan reste immobile alors que le contenu d'avant-plan, il a comme l'air de glisser dessus. Bon, maintenant on va revenir sur background-image. Ici nous avons vu qu'on peut appliquer une image d'arrière-plan qui va se répéter ou non selon bien sûr les propriétés que l'on souhaite appliquer. Mais il y a une valeur spéciale pour cette background-image. Bon, d'ailleurs je vais l'appliquer ici. Image égale. Bon, il faut noter une chose, c'est que si vous déclarez la même propriété 2 fois, c'est la dernière qui sera appliquée. C'est un peu comme si vous écrasez l'ancienne propriété. Donc background-image, bon d'ailleurs pour enlever toute ambiguïté, on va mettre ici un commentaire pour dire que ça va pas s'appliquer. Et là on va mettre la valeur linear-gradient. Linear-gradient, c'est quoi? C'est tout simplement le dégradé, c'est-à-dire imaginez que l'on veut appliquer une couleur dégradée sur le fond de la page. Alors le dégradé, on veut qu'il soit appliqué par exemple de haut en bas, donc la direction c'est vers le bas. On va mettre ici to-bottom, voilà, ça veut dire c'est vers le bas. Et ensuite on va spécifier les deux couleurs des deux extrémités, c'est-à-dire la couleur qu'on va avoir en haut et la couleur que l'on va avoir en bas. Le navigateur, il va se charger de calculer toutes les couleurs intermédiaires. Par exemple, on va mettre orange Et yellow. Alors on imagine que en haut on aura l'orange, en bas c'est le jaune et entre les deux c'est tous les dégradés possibles. Voilà, quand j'actualise, on voit bien qu'il y a le dégradé. En haut c'est orange et là c'est le jaune. Bien sûr, je peux appliquer d'autres couleurs. Par exemple, on va mettre ici green, c'est-à-dire que c'est un dégradé de trois couleurs. On a l'orange au début, le jaune au milieu et le vert en bas avec bien sûr tous les dégradés possibles entre ces couleurs clés. Et voilà la forme que nous avons à la fin. Merci pour votre attention et à la vidéo prochaine.
