Comment créer : image héroïque

Apprenez à créer une image héroïque en utilisant CSS.

L'image héroïque est une grande image avec du texte, généralement placée en haut de la page web :

Essayez-le vous-même

Comment créer une image héroïque

Première étape - Ajouter HTML :

<div class="hero-image">
  <div class="hero-text">
    <h1>Je suis Bill Gates</h1>
    <p>Et je suis photographe</p>
    <button>Engagez-moi</button>
  </div>
</div>

Deuxième étape - Ajouter CSS :

body, html {
    height: 100%;
}
/* Image héroïque */
.hero-image {
  /* Utiliser "linear-gradient" pour ajouter un effet de fond sombre à l'image (photographer.jpg). Cela rendra le texte plus facile à lire */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Définir une hauteur spécifique */
  height: 50%;
  /* Positionner et centrer l'image pour une bonne mise à l'échelle sur tous les écrans */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Placer le texte au centre de l'image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

Essayez-le vous-même