Chapitre 650 | Une Hero Section en full viewport

Tip : si vous voulez une image un peu plus parlante que le placehold.co : ajouter une image de votre choix ou bien utiliser ce code : https://picsum.photos/1920/1080

Ce que l’on va construire

Une Hero Section est le premier bloc visible d’une page web — celui que le visiteur voit en arrivant, avant même de faire défiler la page.

Le résultat final, en langage naturel : un bloc qui occupe toute la hauteur de l’écran, avec une image en arrière-plan. Une barre de navigation est superposée en haut, avec un fond transparent. Au centre, un titre, un texte, et un bouton.

Précision importante : dans ce chapitre, la navigation reste volontairement simple et ne s’adapte pas aux petits écrans (pas de menu burger). Cette technique sera vue plus loin dans le cours.

Étape 1 : La structure HTML

Tout tient dans une seule section, qui contient trois éléments : la nav, un calque de superposition (l’overlay, expliqué à l’étape 4), et le contenu central.

<!-- section.hero : le grand bloc plein écran -->
<section class="hero">
  <!-- la navigation, superposée en haut -->
  <nav>
    <div class="logo">Mon Site</div>
    <ul class="nav-links">
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Projets</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- overlay : voile sombre posé sur l'image, expliqué à l'étape 4 -->
  <div class="overlay"></div>

  <!-- le contenu central -->
  <div class="hero-content">
    <h1>Ceci est une Hero Section en full viewport</h1>
    <p>Elle occupe toute la hauteur de l'écran, avec une image en arrière-plan.</p>
    <a href="#" class="btn">Découvrir</a>
  </div>
</section>

Étape 2 : Le bloc plein écran, avec son image

.hero {
  /* position de référence pour la nav et l'overlay, positionnés en absolute à l'intérieur */
  position: relative;
  /* occupe 100% de la hauteur visible de l'écran (viewport) */
  height: 100vh;
  background-image: url('https://placehold.co/1600x900?text=hero-full-viewport');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Nouvelle unité : vh (viewport height). Contrairement au px ou au %, le vh se base sur la hauteur visible de l’écran de la personne qui consulte la page : 1vh équivaut à 1% de cette hauteur. Donc height: 100vh; fait en sorte que la section occupe exactement toute la hauteur de l’écran, ni plus ni moins — peu importe la taille de l’écran utilisé.

Le reste (background-image, background-size: cover, background-position: center) reprend exactement la technique déjà vue pour afficher une image en arrière-plan.

Étape 3 : La nav transparente, superposée sur l’image

nav {
  /* sort la nav du flux normal pour la superposer sur l'image, sans lui réserver d'espace en haut de la page */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  /* c'est ce qui rend la nav "transparente" : aucune couleur de fond */
  background-color: transparent;
  /* place la nav au-dessus de l'image et de l'overlay */
  z-index: 2;
}

.logo,
.nav-links a {
  color: #fff;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
}

L’idée clé : la nav est placée en position: absolute;, ce qui la retire du flux normal de la page et la fait se superposer directement sur l’image — au lieu de pousser le reste du contenu vers le bas, comme le ferait une nav « classique ». Sans background-color (ou avec transparent), rien ne cache l’image derrière : c’est ça, une nav « en transparence ».

Étape 4 : L’overlay, pour garder le texte lisible

Selon l’image utilisée, un texte blanc peut devenir difficile à lire si l’image est claire à cet endroit. La solution classique : poser un voile semi-transparent (l’overlay) entre l’image et le texte, pour assombrir légèrement l’ensemble.

.hero .overlay {
  /* recouvre exactement toute la surface du parent .hero */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* noir à 40% d'opacité : assombrit sans masquer complètement l'image */
  background-color: rgba(0, 0, 0, 0.4);
}

Le rgba() fonctionne comme le rgb() déjà connu, avec un 4e paramètre supplémentaire : l’opacité (entre 0, invisible, et 1, totalement opaque). Ici, 0.4 laisse l’image bien visible en transparence, tout en l’assombrissant suffisamment pour que le texte blanc ressorte.

Étape 5 : Centrer le contenu au milieu de l’écran

.hero {
  /* ... (propriétés déjà vues à l'étape 2) ... */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content {
  /* place le texte au-dessus de l'overlay */
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 0 20px;
  max-width: 700px;
}

/* bouton avec radius, comme déjà vu */
.btn {
  display: inline-block;
  background-color: #fb6400;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  text-decoration: none;
}

On retrouve ici display: flex; avec align-items et justify-content réglés sur center — la combinaison classique pour centrer un contenu à la fois horizontalement et verticalement à l’intérieur d’un bloc.

Un point à ne pas oublier : le .hero-content a aussi besoin de position: relative; et z-index: 1;. Sans ça, l’overlay (positionné en absolute, avec son propre empilement) risquerait de passer au-dessus du texte au lieu de rester en dessous.

Étape 6 : Le squelette à assembler

Voici le squelette du fichier complet. À vous de copier-coller, aux bons endroits indiqués en commentaire, les blocs de code déjà vus aux étapes précédentes :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Hero Section full viewport</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: -apple-system, sans-serif; }

    /* collez ici le CSS de .hero (étape 2), sans oublier position: relative */

    /* collez ici le CSS de nav, .logo, .nav-links (étape 3) */

    /* collez ici le CSS de .hero .overlay (étape 4) */

    /* collez ici le CSS de centrage sur .hero, .hero-content et .btn (étape 5) */
  </style>
</head>
<body>

  <!-- collez ici la structure HTML complète de l'étape 1 (section.hero > nav + overlay + hero-content) -->

</body>
</html>

Étape 7 : Tester

Assemblez le HTML de l’étape 1 avec tout le CSS des étapes 2 à 5, dans une page complète. Ouvrez-la dans le navigateur : la section doit occuper tout l’écran, sans qu’aucun défilement ne soit nécessaire pour voir le titre, le texte et le bouton. La nav doit rester discrète, sans fond visible, superposée sur l’image.

Bloqué, ou envie de comparer votre résultat ? Cliquez sur le bouton ci-dessous.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Hero Section full viewport</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: -apple-system, sans-serif; }

    .hero {
      position: relative;
      height: 100vh;
      background-image: url('https://placehold.co/1600x900?text=hero-full-viewport');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px;
      background-color: transparent;
      z-index: 2;
    }

    .logo,
    .nav-links a {
      color: #fff;
    }

    .nav-links {
      display: flex;
      gap: 20px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-links a {
      text-decoration: none;
    }

    .hero .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      color: #fff;
      padding: 0 20px;
      max-width: 700px;
    }

    .btn {
      display: inline-block;
      background-color: #fb6400;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 12px 24px;
      text-decoration: none;
    }
  </style>
</head>
<body>

  <section class="hero">
    <nav>
      <div class="logo">Mon Site</div>
      <ul class="nav-links">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Projets</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <div class="overlay"></div>

    <div class="hero-content">
      <h1>Ceci est une Hero Section en full viewport</h1>
      <p>Elle occupe toute la hauteur de l'écran, avec une image en arrière-plan.</p>
      <a href="#" class="btn">Découvrir</a>
    </div>
  </section>

</body>
</html>