How to Make an HTML Hero Banner

Basic Hero Banner Code

HTML code for the hero banner

<div class="banner">
  <div>
    <h1>Welcome to the site</h1>
    <h5>Sign up for free today</h5>
    <button>Get started</button>
  </div>  
</div>

The custom class attribute value we will use is called banner. This class attribute value needs to be added to the parent element of the call to action section of the code.

CSS declaration for the hero banner

<style>
.banner {
    /* The image used */
    background-image:url(https://.../mountain.jpg);
  }
</style>

Next, add the CSS declaration. This CSS is added directly to the HTML template using the <style> element.

SVG Hero Banner

CSS declaration for an SVG hero banner

<style>
    .banner {
    /* The image used */
    background-image:
      url('data:image/svg+xml;utf8,');
  }
</style>

Adding an SVG banner is slightly more complicated but not difficult.
First, you need to add data:image/svg+xml;utf8, to the URL path. This is a data URI that allows you to specify the content (i.e. the SVG image) that you wish to include in the file.
CSS declaration for an SVG hero banner

<style>
    .banner {
    /* The image used */
    background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g fill="rgb(248, 249, 250)"><path d="M55.8,-64.5C71.7,-53.3,83.4,-35,83.1,-17.5C82.9,0.1,70.7,16.9,59.3,32C47.9,47,37.3,60.3,25.7,60C14,59.6,1.2,45.7,-12.7,38.9C-26.5,32,-41.5,32.3,-44.6,26.1C-47.8,19.9,-39.2,7.3,-35.7,-5.2C-32.2,-17.6,-33.8,-29.9,-28.7,-43.1C-23.6,-56.2,-11.8,-70.3,4.1,-75.2C20,-80,40,-75.8,55.8,-64.5Z" transform="translate(100 100)" /></g></svg>');
  }
</style>

Next, you can load in the SVG syntax directly after.

Hero Banners with the background-size property

Banner CSS declaration with a set background-size

<style>
.banner {
    /* The image used */
    background-image:
    url(https://.../mountain.png);
    /* Set background size */
    background-size:cover;
  }
</style>

Another property to use for hero banners is background-size.
By default, the background-size is auto, the original size of the image. There are seven property values for background-size however, the cover value works well for hero banners given that it resizes the background image to cover the entire container.

Hero Banners with the background-position property

Banner CSS declaration with a set background-position

<style>
.banner {
    /* The image used */
    background-image:
    url(https://.../mountain.png);
    /* Set background position */
    background-position:right center
  }
</style>

Use the CSS property background-position to display a certain part of the background image as the hero banner.

Hero Banners with the linear-gradient CSS function

Banner CSS declaration with a linear gradient

<style>
.banner {
    /* The image used */
    background-image:
    /* Set a linear gradient */
    linear-gradient(to top right, rgba(228,221,221, 0.50) 10%, rgba(0,0,0, 0.80 ) 60%),
    url(https://.../mountain.png);
  }
</style>

Add the linear-gradient CSS function to create a gradient on the top of the background image. The direction, colors, and color opacities are all customizable.

More information