[Resolved] Faded overlay on hero image

[Amiria]

Hi there,

I have created a hero image, using a grey background overlay to darken the featured image, so that the page title text is more visible.

I would like to this overlay to be occur at the bottom of the image only (where the title text is), and fade away towards the top of the image, so that the image is the original brightness/colour at the top.

Can you please let me know how this might be achieved?

Thank you!

[Fernando]

Hi Amiria,

You can add a Background Gradient in the Backgrounds section of the Container Block Settings. Example: https://share.getcloudapp.com/kpuOezj5

Reference: https://docs.generateblocks.com/article/advanced-backgrounds/#background-gradient

Just set the Direction and the Colors to your preference. Make sure to lessen the opacity of the color a bit.

Also, set the selector to Pseudo Element.

[Amiria]

Thanks so much for your help, Fernando.

This is a novice question, because I am not really sure what I am doing! I can see how to apply the background gradient now, however I am not sure where to access the Container Block Settings. I want the gradient to appear on all hero images sitewide. Do I need to set up a different element somehow, and then apply apply the block settings to this? (I can’t see anywhere in the existing hero element where I can do this, so I’m not sure what to do).

[Fernando]

Do you already have a Block Element – Page Hero?

If so, it’s best to apply the Page Hero image with a gradient through there.

Example: https://share.getcloudapp.com/NQu4Bm1p

In this example, I also show where the Container Block Settings are.

[Amiria]

Oh, thank you so much Fernando! You provide amazing support. I really appreciate it. I had created it using Header element type, rather than Block. All done now. Thank you! 🙂

[Fernando]

You’re welcome, Amiria! 🙂

[Author]

Posts