How to create: hero image

Learn how to create hero images using CSS.

A hero image is a large image with text, usually placed at the top of a web page:

Try It Yourself

How to create a hero image

Step 1 - Add 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>

Step 2 - Add CSS:

body, html {
    height: 100%;
}
/* Hero image */
.hero-image {
  /* Use "linear-gradient" to add a dark background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Set a specific height */
  height: 50%;
  /* Position and center the image to scale well on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the center of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

Try It Yourself