How to Make an HTML Hero Banner
Tags: html, css
Published: 2021-03-26 21:07:10

###Basic Hero Banner Code
_HTML code for the hero banner_
```html
<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_
```html
<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_
```html
<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_
```html
<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_
```html
<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_
```html
<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
```html
<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](https://www.ordinarycoders.com/blog/article/hero-banners)