[Resolved] Background image gradient

Home Forums Support [Resolved] Background image gradient

Home Forums Support Background image gradient

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2225245
    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.

    #2225304
    David
    Staff
    Customer Support

    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

    #2229315
    Matthias

    works. thank you.

    #2229361
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.