[Resolved] Background image gradient

[Matthias]

Hi there,

i am trying to create a block with generatepress and generateblocks where the background image is covered by a gradient.
Meaning: the background image is 100% viewable at the top and then fades out after maybe 10-20% of the block size. After that only the background color can be seen. So basically the opacity should be a gradient – from 0 to 1 the lower you get.
I tried around a lot to achieve that – but can’t seem to get the settings to cover the lower ~80 of the image.

Is that possible with gp and gb?
I uploaded a screenshot of my current state – where you can see background image + dark background color.

Hope you get what i mean.

[David]

Hi there,

select the Container Block with the background image.

In Backgrounds – enable Use Gradient and set its Selector: Psuedo Element. This will place the gradient over the image.

Then set your two Gradient Colors to the same color.
Change the first colors opacity to 0 and second color to 100
Change the Rotation to 180deg.
Then edit the Stop Point of the second color – try setting it to 20

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthias]

works. thank you.

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts