Page hero background image in full

Hi Michael,

The site is built with Elementor, I'm not seeing a GP page hero (block element - page hero) on your site.

Are you referring to an Elementor section as the page hero?

Can you point out which section are you talking about?

Hi Ying

Yes, it is unfortunately built with Elementor.

Sorry, when editing in Elementor the top elemento is also called "Hero", but I am referring to a section with these CSS classes in the code (hope you can find it like this):
.elementor-section .elementor-top-section .elementor-element .elementor-element-19e77eb .elementor-section-content-middle .overflow-x-hidden .elementor-section-boxed .elementor-section-height-default .elementor-section-height-default

Hope that helps.

Thanks,
Michael

Hi Michael,

Are you referring to the text “FEED”? Do you want to put it over the Page Hero?

May we know what “Cut off at the bottom” means? How should it look like?

Let us know.

Hi Fernando

Sorry, I changed the image back to the previous one again.
Now you can see that the image is "cut off" at the bottom.

Instead, the whole image should be displayed at the right border.

Do you understand what I mean?

Thanks a lot
Michael

Sorry, it still looks the same from my end.

This is what I see: https://share.getcloudapp.com/5zurko4W

Should I be seeing something different?

Yes, you should see an image in the right upper corner which is cut off.
Did you empty your browser cache and/or used a private browser window?

It should look different.

It’s getting cut off because the height of the container holding it is not enough.

Are you planning to put this over the next section?

If so, it might be better to add this image in a seperate Block, through a Block Element possibly, and hooked to somewhere like after_header. Then, move it through custom CSS.

As is, if the div holding the background image doesn’t have enough height, the image will be cut off.

Hi Fernando

That worked, thank you.

However, it messes up the content to its left.
I tried using z-index to bring it to the background so it integrates smoother, but that did not work.

The background image should just stay in the background without affecting the rest of the content on this page.
Any ideas on how to achieve this?

Thank you again,
Michael

Have you tried adding it through the Backgrounds module? Add it to the Body for instance.

Reference: https://docs.generatepress.com/article/backgrounds-overview/

Will give it a try, thanks.
I currently see other issues (e.g. overlapping images at the bottom), but this needs to be discussed with the client.

Thank you very much, Fernando.

I see. You’re welcome Michael!