DEV Community

loading...
Cover image for How to Make an HTML Hero Banner

How to Make an HTML Hero Banner

Ordinary Coders
Coding can be difficult. Get motivated by learning to code with interactive, step-by-step tutorials.
Originally published at ordinarycoders.com ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app