Comment - Image pleine page
Apprenez à créer une image d'arrière-plan pleine page avec CSS.
Image pleine page
Découvrez comment créer une image d'arrière-plan couvrant toute la fenêtre du navigateur. L'exemple suivant montre une image d'arrière-plan réactive plein écran (et demi-écran) :
Démo - Image d'arrière-plan pleine page
Démo - Image d'arrière-plan d'une demi-page
Comment créer une image pleine hauteur
Utilisez un élément conteneur et ajoutez une image d'arrière-plan au conteneur avec height: 100%
.
Conseil : utilisez 50 % pour créer une image d'arrière-plan d'une demi-page. Utilisez ensuite les propriétés d'arrière-plan suivantes pour centrer et redimensionner parfaitement l'image :
Remarque : Pour vous assurer que l'image couvre tout l'écran, vous devez également appliquer height: 100%
à la fois <html> et <body> :
Exemple
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Image de fond d'une demi-page :
Exemple
.bg {
height: 50%;
}