L'essentiel des CSS

Appliquer un arrière-plan avec images

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les arrière-plans peuvent contenir des images. Découvrez les propriétés de base qui vont vous permettre d'affiner la pose de ce papier peint virtuel.
06:53

Transcription

Les arrières plans comme on l'a vu tout au cours des étapes précédentes, peuvent être constitués d'une couleur. Donc ici on a utilisé un background color, par exemple light gris pour que toutes les divs de la page HTML soient représentées avec un fond gris. Maintenant on va pouvoir utiliser dans nos images des dégradés, donc pour faire un dégradé, à ce moment-là, on va utiliser le mode abrégé background et on va le renseigner sous forme de linear gradient et puis je vous invite à vous rapprocher de l'étape sur les dégradés pour consulter toutes les approches et tous les paramétrages qu'il peut y avoir pour cette particularité-là. Maintenant ce qui va nous intéresser ici sur l'arrière plan, va être plutôt la partie image. Alors ici j'ai préparé une petite image qui représente une sorte de carrelage mural avec un manque de carreau, et on va essayer de tapisser l'arrière plan de cette division par une image. Alors pour ça tout simplement, il va falloir simplement entrer un background et ce background on va lui donner comme propriété une URL et cette URL en fait on va pointer vers l'image. Alors l'image se trouve dans un dossier en amont, qui s'appelle image et l'image s'appelle mur_fonds.png voilà. Une fois l'information donnée, on actualise la page vous voyez que directement ça se remplit. Alors ça a été un peu volontairement fait, un décalage de lumière pour qu'on puisse les repérer mais vous voyez si l'image s'y prête, en fait on va avoir une mosaïque qui va épouser le fonds de l'arrière plan de l'image et sera raccord et qui permettra donc d'avoir vraiment une homogéinité parfaite dans l'assemblage de cette mosaïque. Alors on va voir qu'on a d'autres possibilités justement, c'est sur cette répétition, c'est à dire que de manière automatique l'image se répète aussi bien horizontalement que verticalement. Donc si on récupère cette information-là, et que je la copie, je la colle ici, on va pouvoir agir comme un paramètre, maintenant ici sur le Repeat si je marque No repeat l'image ne va pas se répéter. Vous voyez ici elle ne se répète pas. Alors ce qu'on va faire maintenant, c'est rajouter une bordure tout simplement pour pouvoir visualiser le décalage de cette répétition. Si je mets un pixel solide et je vais le mettre en HSL par exemple 35 % je vais prendre cette valeur-là qui me va bien. Voilà ! ctrl+C, celle-ci je vais venir la copier ici. Si j'actualise ma page, vous voyez que, - ah je l'ai pas mis sur la bonne pioche - voilà je vais la mettre sur le Repeat ici, crtl+s si j'actualise on voit bien la bordure. Elle est bien calée ici au départ. Et on voit bien qu'il y a pas assez de place sur la hauteur ici pour pouvoir placer une autre image. On comprend qu'il y a pas assez de place non plus pour cette image. Alors si je joue maintenant, au lieu de No repeat avec un Repeat x uniquement le système théoriquement, il me faudrait expliquer ce que je vais faire sur la partie Y, ici je ne le dis pas je dis juste le X, là en fait le système comprend que je ne veux pas répéter le Y. C'est un peu comme si j'avais écrit Repeat X No Repeat et tout à l'heure quand il y avait No repeat c'est comme si j'avais écrit No Repeat No Repeat. Maintenant je vais pouvoir écrire aussi un Repeat Y qui permet de répéter que verticalement. Donc, vous voyez que vous pouvez gérer cet élément-là sur l'axe global X et Y, sur X ou sur Y. Maintenant on a d'autres possibilités qui vont être de dire j'aimerais plutôt que tu me mettes un espace entre chacune. C'est à dire que l'espace qui manque pour combler le trou, j'aimerais que tu le répartisse entre les images. Et si j'actualise regardez, voyez ici : il n'a mis que 2 images sur la hauteur., il n'y a pas assez de place et a reparti ces 2 images. Maintenant je pourrais lui demander aussi de faire un arrondissement, c'est à dire qu'il étire un peu les images alors Round, je vais demander pour qu'il fasse en sorte de tirer l'image pour qu'elle puisse rentrer à l'intérieur. Alors si je suis dans une surface un peu plus grande et que je dépasse la moitié de l'image en plus, à ce moment-là il la mettra deux, il compressera. Si par contre je suis en dessous de la moitié en plus, il va les compresser. C'est ce qui passe ici voyez mettre trois ben il compresse ici il peut en mettre qu'une il l'étire et voilà, donc plusieurs propriétés pour le Repeat qui peuvent être No Repeat, Repeat X, Repeat Y ,Space, et Round pour pouvoir gérer le papier peint sur l'arrière plan. Maintenant on va pouvoir gérer la position aussi, alors si je reprends la même expression et si je regarde bien cette fois-ci dans la partie ici du rectangle, on va se trouver avec un départ de papier peints qui va être exactement à l'angle, mais je pourrais très bien utiliser ici lui dire je veux être à 10 pixels 10 pixels et je vais me décaler ce papier peint de 10 pixels, et 10 pixels, vous voyez ? Alors, on n'est pas obligé de rester sur du pixel. Je pourrais avoir ici une propriété même center pour lui dire : « là, tu te mettras au centre. » Alors ici, voyez il va se mettre à 10 pixels du bord et verticalement il va se mettre au centre. On pourrait aussi lui dire au top et là comme ça on va pouvoir venir affiner, soit par des mots clés, soit par une position même en pourcentage, on pourrait mettre 50%. Alors là, faites attention avec le 50% il va se positionner au centre de l'image ici pas en partie haute de l'image. Voilà donc on peut utiliser ou des mots clés ou des unités fixes, ou des unités en pourcentage pour pouvoir positionner cet élément. Alors juste un petit détail ici, on voit qu'ici l'arrière plan gris n'existe plus, il est blanc. Rappelez-vous quand on travaille en mode mode abrégé si toutes les propriétés ne sont pas définies, automatiquement elles seront remises aux valeurs par défaut. Donc si je viens rajouter un light grey, ici, la couleur. Quand j'enregistre je peux avoir et l'image et la couleur qui se superposent. Voilà ce petit détail était quand même important je pense à signaler. Donc maintenant, on va récupérer notre élément ici et au niveau de la taille, on a la possibilité de gérer la manière dont l'image uniquement c'est à dire en No repeat va être attachée à ce fond. Regardez ici si je dis un background auto ici c'est la valeur par défaut, en gros mon image est placée de manière automatique. Mais si je place maintenant cover quand je vais faire un rafraîchissement, vous voyez l'image va s'étendre dans sa largeur pour pouvoir tenir sur les bordures, si l'image est un paysage, le bleu va s'étirer sur la largeur s'il est en portrait il va s'étirer sur la hauteur. C'est la plus grande longueur qui va gagner sur la couverture. Si maintenant je mets contains, je vais demander en fait au système de faire en sorte que l'image puisse s'adapter à l'intérieur intégralement à épouser les bordures. Bien entendu là je suis un peu limité parce que je ne suis pas dans un rapport homothétique cohérent entre le div et l'animation de l'image, mais vous voyez le principe. Par contre on pourrait aussi très bien dire : « moi, je voudrais qu'elle fasse 50%.» Là ici, quand je vais actualiser, mon image va faire exactement 50% de son rapport le plus large ici sur l'image où j'aurais pu dire exactement aussi 100 pixels, voilà. Donc on va pouvoir définir de façon très précise, la manière dont l'arrière plan va devoir s'adapter à la boîte conteneur auquel il est appliqué.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !