Hur man skapar: hjältebild

Lär dig hur man skapar hjältebilder med CSS.

En hjältebild är en stor bild med text, som vanligtvis placeras på toppen av en webbsida:

Prova själv

Hur man skapar en hjältebild

Steg 1 - Lägg till HTML:

<div class="hero-image">
  <div class="hero-text">
    <h1>I am Bill Gates</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

Steg 2 - Lägg till CSS:

body, html {
    height: 100%;
}
/* Hjältebild */
.hero-image {
  /* Använd "linear-gradient" för att lägga till en mörk bakgrundseffekt till bilden (photographer.jpg). Detta gör texten lättare att läsa */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Ställ in specifik höjd */
  height: 50%;
  /* Placera bilden och centrera den för att den ska skalas bra på alla skärmar */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Lägg texten i mitten av bilden */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  färg: vit;
}

Prova själv