[Resolved] Adding extra Gradient to Blog Post Headers

Home Forums Support Adding extra Gradient to Blog Post Headers

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1161472
    John

    Hi there,

    I am hoping you can help me with some css for adding an extra Gradient to Blog Posts Header/Nav.

    I have used Beaver Builder to add a Gradient to the Top of Pages on this site – and it is subtle but there at the top.
    It is a linear gradient – From #00331a to Transparent…finishing after 100pxs.

    I have created a simple gradient:
    .simple-linear {
    background: linear-gradient(#00331a 89px, rgba(255,0,0,0) );
    z-index:-10;
    }

    And then added this to the Page Hero Element Class.
    But this then covers the Page Hero image and the Gradient which is on that.
    https://riverpsychotherapy.com/parts-work/
    Can you see what I am doing wrong with this?

    Ideally it will look like one of the other pages:
    https://riverpsychotherapy.com/about-me/

    Cheers!

    #1161618
    David
    Staff
    Customer Support

    Hi there,

    try this instead:

    .simple-linear,
    .simple-linear .inside-page-hero {
        position: relative;
    }
    
    .simple-linear:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(#00331a 89px, rgba(255,0,0,0) );
    }
    #1162489
    John

    Excellent – great support as always.
    Thank you!

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