How To Create a Home Page Hero Area

July 21, 2019

In this post I will show you how to use several CSS features to create a nice looking hero image area for your home page.

Here are some of the different CSS features we will be using to accomplish this:

• image covering entire background area
• color gradient overlay on image
• centering test (horizontal and vertical)
• clip-path to achieve a cool diagonal bottom

When complete our page will look like this.

Ready? Let’s start with the HTML.

<header class="header">
<h1 class="heading-primary">
      <span class="heading-primary-main">Maine</span>
      <span class="heading-primary-sub">where adventure awaits</span>
</h1>
</header>

Now let’s add the CSS.

.header {
    height: 100vh;
    background-image: url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
}

Now let’s apply a linear gradient color to it. To do this, we add the linear gradient info before the image url (because we want the gradient on top of the image).

This gradient is starting at the top left and going to the right bottom of the image.

.header {
    height: 100vh;
    background-image: linear-gradient(to right bottom,rgba(126,213,111,0.8), rgba(40,180,131,0.8)), url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
}

Time to add some text and center it horizontally and vertically. To do this, wrap the text in a div and use absolute positioning to center it.

The new HTML

<header class="header">
   <div class="text-box">
      <h1 class="heading-primary">
         <span class="heading-primary-main">Maine</span>
         <span class="heading-primary-sub">where adventure awaits</span>
      </h1>
   </div>
</header>

The CSS.

.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.header {
height: 100vh;
background-image: linear-gradient(to right bottom,rgba(126,213,111,0.8), rgba(40,180,131,0.8)), url(../img/hero.jpg);
background-size: cover;
background-position: top;
}

.heading-primary {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
text-align: center;
}

.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 20px;
}

.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 13px;
}

Now to give it a cool clipped look at the bottom, add this css. Note, we changed the top position of .text-box to move it up and make it look more centered because the diagonal slope bottom make it look not centered (even when it is).

.header {
height: 100vh;
background-image: linear-gradient(to right bottom,rgba(126,213,111,0.8), rgba(40,180,131,0.8)), url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Want the full code?

<style>

.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}

.header {
height: 95vh;
background-image: linear-gradient(to right bottom,rgba(126,213,111,0.8), rgba(40,180,131,0.8)), url(../img/hero.jpg);
background-size: cover;
background-position: top;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
-webkit clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

.heading-primary {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
text-align: center;
}

.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 20px;
}

.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 13px;
}

</style>

<header class="header">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Maine</span>
<span class="heading-primary-sub">where adventure awaits</span>
</h1>
</div>
</header>