Hoe te maken: heldbeeld

Leer hoe je een heldbeeld kunt maken met CSS.

Een heldbeeld is een groot beeld met tekst, meestal geplaatst aan de top van een webpagina:

Try it yourself

Hoe een heldbeeld te maken

Eerste stap - Voeg HTML toe:

<div class="hero-image">
  <div class="hero-text">
    <h1Ik ben Bill Gates</h1>
    <p>En ik ben een fotograaf</p>
    <knop>Huur me in</knop>
  </div>
</div>

Tweede stap - Voeg CSS toe:

lichaam, html {
    hoogte: 100%;
{}
/* Heldbeeld */
.hero-image {
  /* Gebruik "lineair verloop" om een donkere achtergrondeffect toe te voegen aan het beeld (photographer.jpg). Dit maakt de tekst gemakkelijker te lezen */
  achtergrondafbeelding: lineair verloop(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Stel een specifieke hoogte in */
  hoogte: 50%;
  /* Plaats het beeld en centrereer het, zodat het goed schaalbaar is op alle schermen */
  achtergrondpositie: midden;
  achtergrondherhaling: geen herhaling;
  achtergrondgrootte: dekend;
  positie: relatief;
{}
/* Plaats de tekst in het midden van het beeld */
.hero-text {
  tekstuitlijning: midden;
  positie: absoluut;
  boven: 50%;
  links: 50%;
  transform: vertaal(-50%, -50%);
  color: white;
{}

Try it yourself