Create a Home Page Hero Area

How To Create a Home Page Hero Area

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.

hero image header

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

full width hero image
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;
}

hero with gradient
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;
}

hero with centered text

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%);
}

hero image header

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>

Leave a Reply

Your email address will not be published. Required fields are marked *