[Resolved] Display “Banner Image” Below Header on home page

[Shayne]

Hey, I have searched for this and found a page that explained how to do this with the Page Hero elements.

I set it up as shown in the screenshots below, but it is not showing. What am I missing?

I have the default GeneratePress theme. The website is currently “staging”

CURRENT WEBSITE:

STAGING:

PAGE HERO SETTINGS:

Any help would be greatly appreciated. Thank you

[Leo]

Hi there,

Can you try adding some top and bottom padding in the page hero?

Let me know 🙂

[Shayne]

That seemed to have done the trick. I had to add 400px padding at the top.

[Shayne]

Thank you!

[Leo]

No problem 🙂

[Shayne]

Any tips to make it look decent on mobile?

Staging

Old Theme

[Leo]

I’m guessing your old site is using static image (response) as opposed to the background image (not responsive) in page hero.

If you are not adding any content on top of the image, then you can just use the featured image option:
https://docs.generatepress.com/article/adding-featured-images/

If this doesn’t help, can you link me to the page in question?

[Shayne]

Would this work to only display it on the home page? If so, I am not sure how to do so as the only “pages” I have are contact & privacy policy.

[David]

Hi there,

you can use % top and bottom padding.
First calclulate the original image aspect ratio ie.

Height(px) / Width(px) * 100 = %

Now add that as you combined top and bottom padding.
Ef. if the aspect ration is 56% then set top and bottom to 28% each.

This will keep the header image responsive.

[Shayne]

Ok, so I tried this and got it to look decent on mobile, but it’s weird on desktop. This is the math I did:

image is 422 x 1200

(422/1200)*100 = 35.17

On mobile I set this:

Looks like this:

on desktop when I choose these settings:

I get this:

Thanks

[Leo]

Can you link us to the page in question?

[Shayne]

Yes, thank you:

https://staging.adventureblog.net/

You will get an SSL error as this in on staging and I don’t have an SSL cert installed for the staging sub domain.

[David]

For Desktop you will need to use Pixel Padding to size the image. As the % method i provided only applies when the Featured Image spans full width.

[Shayne]

Is there a calculation for how much padding (pixels) I should use for desktop too? I can get it to look good on my laptop, but on other resolutions, it cuts off pretty badly.

[David]

As there is no content for your image it may be easier to remove the background image and all the padding and add this to the content:

<img class="hero-image" src="full_url_to_your_image/image.jpg" />

just update the URL and make sure the original image is the width of the hero element.
This will then display the full image regardless of screen size.

[Author]

Posts