CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 3 Comment ajouter un arrière-plan fullscreen en CSS

Comment ajouter un arrière-plan fullscreen en CSS

Réaliser une page avec un arrière-plan plein écran.
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
3,0
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Incorporation d'un arrière-plan fullscreen

Objectifs

Les objectifs de cette vidéo sont d'apprendre à ajouter un arrière-plan fullscreen en CSS, ajuster ses propriétés pour une adaptation plein écran, et corriger les éléments visuels pour une mise en page parfaite.

Résumé

Cette leçon explique comment ajouter un arrière-plan fullscreen en utilisant des styles CSS, en s'assurant que l'image s'adapte à la taille de la fenêtre du navigateur.

Description

Dans cette leçon, nous allons reprendre un fichier CSS existant et y ajouter un arrière-plan fullscreen. Nous commencerons par spécifier l'image de fond souhaitée et utiliserons les propriétés CSS pour assurer que l'image couvre toute la fenêtre, quelle que soit sa taille. Nous verrons comment définir des propriétés comme background-size à cover, la position en fixed, et éviter la répétition avec no-repeat. Une fois l'image correctement intégrée et redimensionnée, nous corrigons les défauts visuels en ajoutant un arrière-plan blanc aux sections nécessaires. Enfin, nous ajustons les marges et paddings pour obtenir une mise en page uniforme et sans ascenseur. Cette technique est essentielle pour créer des designs modernes et réactifs, offrant une expérience visuelle immersive pour les utilisateurs.

Voir plus

Questions - réponses

Pourquoi utiliser la propriété 'background-size: cover' ?
La propriété 'background-size: cover' permet de redimensionner l'image de fond pour qu'elle couvre entièrement l'arrière-plan, en s'adaptant à la taille de la fenêtre du navigateur.
Quel est l'avantage de fixer la position de l'arrière-plan en 'fixed'?
Fixer l'arrière-plan en 'fixed' permet au contenu de défiler au-dessus de l'image, ce qui garantit que l'arrière-plan reste statique et n'affecte pas l'aspect visuel de la page.
Comment éviter que l'image de fond se répète ?
Pour éviter que l'image de fond se répète, utilisez la propriété CSS 'background-repeat' avec la valeur 'no-repeat'.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 year
Commentaire
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.