Introduction à la Propriété Background Size
Objectifs
Les objectifs de cette vidéo sont d'apprendre à :
- Utiliser la propriété background-size en CSS.
- Adapter une image d'arrière-plan à la taille de la fenêtre du navigateur.
- Comprendre les différences entre les valeurs contain et cover.
Résumé
Apprenez à utiliser la propriété Background Size pour adapter les images d'arrière-plan à la taille de la fenêtre du navigateur.
Description
La propriété Background Size est un outil précieux pour ceux qui souhaitent adapter les images d'arrière-plan à la taille de la fenêtre du navigateur dans le design d'une page web responsive. Bien qu'elle ne soit pas identifiée comme une propriété essentielle pour le responsive web design, elle joue un rôle crucial dans l'amélioration de l'esthétique de votre site web en permettant aux images de s'adapter sans distorsion. Dans cette leçon, nous allons explorer les différentes valeurs de la propriété background-size, à savoir contain et cover, et comment elles affectent l'affichage de l'image d'arrière-plan. Nous aborderons également la compatibilité de cette propriété avec différents navigateurs et verrons comment utiliser les propriétés connexes comme background-repeat, background-attachment, et background-position pour obtenir le résultat souhaité. Vous apprendrez ainsi à créer une page où l'image d'arrière-plan couvre entièrement la surface sans répétition, s'agrandissant ou se réduisant par rapport à son centre, assurant un rendu visuel optimal.
Questions - réponses
Programme détaillé
Module 1 - Introduction video
Module 2 - Principes généraux
Module 3 - Réaliser une maquette en responsive Design
Module 4 - Maitriser l'intégration en Responsive Design
Module 5 - Le travail des textes
Module 6 - Intégrer des images optimisées
Module 7 - Une réalisation complète
Module 8 - Connaissances complémentaires
Module 9 - Conclusion
