How to create a hero banner image using HTML & CSS

In this post, you will see how to create the hero banner image only using HTML & CSS. The hero banner image is generally known as the “Hero Section” on a web page.

It’s normally the first section of a web page. And this hero section generally consists of a background image and a background overlay color, and on top of that, it contains a heading, paragraph & CTA (call to action).

End of this post, I will give you the full source code & show you the live preview.

Let’s see how we can create a hero section as you see in the design below:

Hero banner section design Hero banner section

I will give you a couple more designs in HTML & CSS. So you can practice more & choose a better banner based on your need.

Let’s move on.

How to create a hero banner using HTML CSS?

To show you the step-by-step process, I created a project folder on my desktop named “herobanner” and in your case, the name might be different. It really doesn’t matter.

See my project structure below.

Hero banner image project structure

Create an HTML & CSS file in your project folder

I created an HTML & CSS file named “index & style” accordingly. And I linked the stylesheet (style.css) to my index.html file.

Also, I created a folder inside the project folder named “img” to store all my images here (including the banner image or background image).

After that, I created an HTML markup for the hero section.

My HTML markup looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Aclonica&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Hero banner image using HTML & CSS</title>
</head>
<body>
  <section class="hero">
    <div class="hero-container">
      <h1>Consectetur adipisicing elitsse nostrum eveniet</h1>
      <p>Tempora recusandae id ab provident expedita magnam, quibusdam fugit exquia, quae eos nemo vitae iusto. Eum obcaecati ad!</p>
      <a href="index.html">Provident expedita →</a>
    </div>
  </section>
</body>
</html>

I wrote the following CSS to make the banner/hero look nice and mobile responsive.

/*
** Hero banner image template
* Available for download on GitHub
* Avaiable fonts:
* font-family: 'Aclonica', sans-serif;
* font-family: 'Roboto', sans-serif;
* */


/* basic CSS reset */
* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
img {
  max-width: 100%;
}
/* Banner */
body {
  font-family: 'Roboto', sans-serif;
}
.hero {
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url("./img/hero-banner-image-1.jpg");
  background-size:cover;
  background-position: center;
  padding: 90px 15px;
}
.hero .hero-container {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.hero .hero-container h1{
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Aclonica', sans-serif;
  font-size: 30px;
  margin: 0;
}
.hero .hero-container p {
  color: #FFFFFF;
  font-size: 22px;
}
.hero .hero-container a {
  text-decoration: none;
  background-color: #7f53ac;
  background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
  color: #FFFFFF;
  padding: 12px 30px;
  display: inline-block;
  text-transform: uppercase;
  border-radius: 25px;
  transition: all 0.9s ease;
}
.hero .hero-container a:hover {
  background-color: #42378f;
  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
  color: #000000;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
}
@media (min-width: 768px) {
  .hero .hero-container h1{
    font-size: 70px;
  }
}

After you have the above HTML & CSS in place, your hero banner image section will look like the design you have seen at the very top.

See the live preview & download the full template

I have created the live preview to better visualize the hero sections. You can also download the template & use it on your own projects.

Live Preview

Download the full template

Conclusion

If you have any questions about the hero section that I built or if you don’t understand anything, or if you want to see/download more hero sections like this, please let me know.