Comment créer : Image complète de page

Apprenez à créer une image de fond de page complète en utilisant CSS.

Image complète de page

Apprenez à créer une image de fond qui couvre toute la fenêtre du navigateur. L'exemple suivant montre une image de fond responsive (et demi-écran) :

Démo - Image de fond complète

Démo - Image de fond demi-page

Comment créer une image complète en hauteur

Utilisez un élément de conteneur et ajoutez-y une image de fond de hauteur 100%.

Astuce :En utilisant 50%, vous pouvez créer une image de fond de page demi-page. Ensuite, utilisez les propriétés de fond suivantes pour centrer et agrandir l'image parfaits :

Attention :Pour s'assurer que l'image couvre tout l'écran, vous devez également height: 100% appliqués simultanément à <html> et <body>:

Image de fond de page complète :

body, html {
  height: 100%;
}
.bg {
  /* L'image utilisée */
  background-image: url("dancer.jpg");
  /* Hauteur complète */
  height: 100%;
  /* Très bien centré et l'image agrandie */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Essayer par vous-même

Image de fond de demi-page :

.bg {
    height: 50%;
}

Essayer par vous-même