How to Create a Hero Image With CSS

A hero image is a large banner image that is placed at the top of a website to grab the attention of visitors and convey the message of the website.

It is an important part of website design and can make or break the first impression of a website.

In this tutorial, we will discuss how to create a hero image with CSS.

HTML Markup

The first step is to create the HTML markup for the hero image.

Here is an example of the HTML code for a hero image:

<div class="hero-image">
  <img src="hero-image.jpg" alt="hero image">
  <div class="hero-text">
    <h1>Welcome to Our Website</h1>
    <p>Learn more about our products and services</p>
  </div>
</div>

CSS Styles

Next, we will add some CSS styles to make the hero image look attractive.

Here is an example of the CSS code for the hero image:

.hero-image {
  background-image: url('hero-image.jpg');
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

The background-image property is used to set the background image of the hero image.

The background-position property is used to center the background image, and the background-repeat property is used to prevent the background image from repeating.

The background-size property is used to cover the entire hero image.

The position property is used to position the text in the center of the hero image.

The top and left properties are used to position the text in the middle of the hero image, and the transform property is used to translate the text 50% from the top and left.