Archived topic
Background image gradient
3 replies · Started by Matthias on May 19, 2022
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.
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
works. thank you.
Glad to hear that!
