How To Add Hero Image using CSS

So, I was attending the Live Webinar ran by Jay on Saturday (or Friday) last week and loved the Hero Image that Jay showed in the training. I've included the link to the training here.

Jay's Training on 25th Jan 2020

In the training, Jay was using a Paid Version of the GeneratePress theme which includes the Sections feature - which was what Jay used to build his Hero Image in the Home Safety Lab home page.

If you are like me and you want a Hero Image but you are not paying for the paid version of GeneratePress, the following is what you can do to achieve the same effect.

1. Find your Hero Image

So, the first thing to do is to go and find your hero image. For this, all the stuff that Jay shared is great. I learned from the training that just by uploading the image to Canva and then re-downloading it back from Canva would give me an optimised image. I had an 11 Mb image that was optimised to 75Kb. Amazing!

2. Upload the Optimised Hero Image to Your Website and Copy the Link to the Image

Using the normal Media Library in your Wordpress site, upload the Hero Image that you just downloaded using the Media -> Add New command in your Wordpress Dashboard.

Once uploaded, click on the Hero Image that you just uploaded in your library. You will see the image loaded up and displayed. Look for the URL link to that image. This is typically found on the right hand side of the screen in a field titled "Copy Link" as seen below..

Copy that link out and paste it in Notepad or any text editor. We will need this later.

3. Create Your Hero Image Style in CSS Editor

If you're still following this tutorial, now you can go to Theme->Customize in Wordpress as seen below.

Then go to Additional CSS as shown below

Now you'll be presented with a space where you can add some code.

I know most of us are terrified of code, but don't worry, you just need to make sure you copy the following code (in between the horizontal lines below) into that space.

Be sure to replace the <Insert URL to Hero Image here> in the 2nd line of the code with the link that you copied at the end of Step 2 above.

---

.hero-image {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("<Insert URL to Hero Image here>");

padding-top: 0px;

background-color: black;

/* Set a specific height */

height: 700px;

/* Position and center the image to scale nicely on all screens */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

position: relative;

}

/* Place text in the middle of the image */

.hero-text {

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

}

.entry-content {

margin-top:10px;

margin-bottom:10px;

}

---

Click on Publish to save the additional CSS when done.

4. Create Your Homepage

If you are still following, we are now at the final step.

In Wordpress, create a new page called Homepage.

Make sure you select the "Text" tab in the top right corner as shown below.

Then you need to copy and paste the following code into the page. Make sure you are on the "Text" tab as shown.

---

<div class="hero-image">

<div class="hero-text">

This is the text that will appear over your Hero Image. You can use h1, h2, h3 tags in here as well

</div>

</div>

---

Whatever text you want to appear over the Hero Image, you can enter them in between the <div class="hero-text"> and </div> as shown above.

Save the homepage and you can preview it to see if it works.

Once you are happy with it, set it as the static page in your site's Homepage settings.

And That's It...

I got this tip from the Wordpress website and I know it looks a little daunting if you are unfamiliar with code, but I encourage you to try it.

The "Additional CSS" section gives us a lot of option to play with styles without having to edit our theme's CSS files - which can be dangerous if you do not know what you are doing. This could be your first foray into dabbling with CSS.

I hope this helps and of course if you prefer an easier way to do this, you can just pay $49.90 per year for the theme. But if you are like me who's just starting out and wanna save a few bucks, this is a possible alternative.