How to Make a HTML Hero Banner

Oct. 5, 2020, 3:11 p.m.

Beginners · 8 min read

How to Make a HTML Hero Banner

What is a hero banner?

A hero banner is an image placed at the top of a web page used to present the website's overall goal or mission to the site user.

 

How does a hero banner look?

A hero banner is more often than not a large background image with text, a form, and/or a button laid over the top. Examples of the hero banner are seen on netflix.com, zillow.com, and aws.amazon.com

aws.amazon.com

AWS Hero banner

 

zillow.com

Zillow Hero Banner

 

netflix.com

Netflix Hero Banner

 

How do you make a hero banner?

A hero banner is made from a JPG, PNG, or SVG. However, the image URL is not placed in an <img> element.

Rather, a custom class attribute value calls the CSS declaration background-image that contains the URL function used to include the background image file.

 


 

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 code.

Any text you want to be placed over the background image needs to be nested within it. 

 

CSS declaration for the hero banner

<style>
.banner {
    /* The image used */
    background-image:;
  }
</style>

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

Declare the same custom class attribute from the HTML <div> element, in this case banner,  then add the property background-image.

 

CSS declaration for the hero banner

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

Within the background-image, call the URL function. This function takes in relative URLs, data URIs, and absolute URLs.

 

CSS declaration for the hero banner

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

Finally, add the image URL to the function. There is no need to add quotation marks around the URL. 

 


 

JPG Hero Banner

CSS declaration for a JPG hero banner

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

Using a JPEG image is straight forward. Just add the URL directly to the URL function.

 


 

PNG Hero Banner

CSS declaration for a PNG hero banner

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

Using a PNG image is also simple and follows the same format.

 


 

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. 

 

SVG hero banner not working?

SVG banner declaration with fill attribute in the <g> element

<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="#f8f9fa"><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>

If your SVG background-image is not working, you may have to move the fill attribute.

In some cases, the fill attribute is placed within the <path> element but for the SVG background image to work correctly, you may need to add the fill attribute to a <g> element.

Any attribute added to the <g> element will be inherited by its children. 

 

SVG hero banner still not working?

SVG banner declaration with RGB fill attribute

<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>

If you are still having trouble with your SVG hero banner appearing, you may need to convert your hexadecimal values ( #FFFFF ) to RGB values ( rgb(166, 83, 0) ). 

 


 

Hero Banners with the height property

Banner CSS declaration with a set height

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

You may have noticed that without a designated height, the hero banner will be the exact height needed to contain all of its child elements.

To set a specific height, add the height property to the banner CSS declaration. 

 


 

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. 

The background-size property values:

  • cover - resizes the image to cover the entire container but it may stretch or cut the image
  • contain - resizes the image to fit within the container
  • auto - the original size of the image
  • initial - sets the image to its default size
  • inherit - inherits its size from the parent element
  • length - stretches the image to the set a width and a height
  • percentage - stretches the image to the set a width and a height

 


 

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.

Two values are specified for the property value, the first being the horizontal position the second being the vertical position. Nine possible property value combinations are made using the values left, right, top, center, and bottom. 

In the example above, the hero banner only displays the right side of the image, vertically centered.

 


 

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. 

The format is linear-gradient (direction, color value 1, color value).

There are nine possible property value combinations for the direction of the linear gradient using the values left, right, top, center, and bottom. 

Next, at least two colors must be defined after the direction.

An optional stop position percentage can be added after the color that goes between 0%  and 100% to set the length of each color along the gradient axis. 

 


 

BONUS: Parallax Hero Banner

What is parallax scrolling?

Parallax scrolling is a CSS effect added to a background image where the image scrolls at a slower rate than the content around it. This effect is often added to a hero banner to add more visual interest to the page.

 

How does a parallax scroll look?

The parallax scroll effect looks like the background image stays in place while other content in the foreground moves at a normal scroll rate over it.

A strong example of the parallax scrolling effect can be found in the New York Times article "Snow Fall: The Avalanche at Tunnel Creek". 

 

How do you add the parallax effect to a hero banner?

<style>
.banner {
    /* The image used */
    background-image:
    url(https://.../mountain.png);
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
  }
</style>

To create this effect, you need to add the CSS property background-attachment:fixed. This property sets the hero banner image in a fixed position even while scrolling. 

 

How do you keep the hero banner from repeating?

<style>
.banner {
    /* The image used */
    background-image:
    url(https://.../mountain.png);
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    /* Prevent image from repeating */
    background-repeat: no-repeat;
  }
</style>

In certain cases when the image is too small to cover the entire container, the image will be repeated to fill up space.

To prevent this repeat, add the CSS property and value background-repeat: no repeat to the hero banner CSS declaration. 


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments