Maîtriser la Propriété CSS Background Size

La propriété background-size
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre le Responsive Design
Revoir le teaser Je m'abonne
Transcription

59,90€ 29,95€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ 29,95€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

Apprenez à utiliser la propriété Background Size pour adapter les images d'arrière-plan à la taille de la fenêtre du navigateur.

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.

Voir plus
Questions réponses
Quelles sont les valeurs possibles pour la propriété background-size ?
Les valeurs possibles sont 'contain' et 'cover', chacune ayant un effet différent sur l'image d'arrière-plan.
Pourquoi la propriété background-size n'est-elle pas supportée par IE 7 et 8 ?
Les versions IE 7 et 8 sont anciennes et ne prennent pas en charge certaines des propriétés CSS modernes, incluant background-size.
Quelle est la fonction de la valeur 'fixed' dans background-attachment ?
La valeur 'fixed' maintient l'image d'arrière-plan immobile par rapport à la fenêtre du navigateur lors du défilement de la page.

Programme détaillé