You are here: Home/Blog/Code/ How To Add A Full Width Image Above Page Content In Genesis

How To Add A Full Width Image Above Page Content In Genesis

Last updated

If you’re familiar with Medium you’re probably familiar with huge hero images being displayed above the content. In order to accomplish something similar we just need a few small tweaks to our functions file, and our style.css.

Essentially what we’re doing is created a custom “Hero Image” that appears above each page of post on your Genesis site.

Here’s what it looks like,

Using WordPress’ built-in Featured Image option we can add a different featured image to any page or post and have it display as a large hero area above the content.

Implementation

We’re going to be editing the theme’s functions file so we need to make sure that backup our install before going forward.

Functions.php

Step 2: Here we are creating a new image size with add_image_size you can change 1400, and 400 to reflect whatever image size you want to use. The first is the width, and the second is the height. I chose 1400px as it should cover most desktop screens without losing too much quality, and 400 px seemed like a good place to round off the height.

The following script uses WordPress’ featured image to insert a background as a background image in the genesis_after_header hook.

I thought about doing this as an inline image, but I realized that a background would make it easier in case I want to put text over the image.

Add the following to your child theme’s functions.php file.

After pasting that code at the bottom of your functions.php file add the following to your child theme’s style.css or sass file

Style.css

Here we are setting the max-width to 100% so it will always stretch to fill the screen size. We’re setting the height to 400px to match the dimensions we declared when we added an image size. Background size cover allows the image to scale responsively and the background position helps keep things centered.

After you’ve pasted this code go into your WordPress Dashboard and under Tools –> Regen. Thumbnails –> run the process and you should be good to go.

Any problems implementing this? Errors in my code? Know a better way to do this? Please comment below.

Note: Sometimes I post affiliate links for awesome products that I use and love and will earn a commission if you purchase through my link. If you think the information I provide is useful please use my link to make a purchase thank you.