[Resolved] Adding extra Gradient to Blog Post Headers

[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!

[David]

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) );
}

[John]

Excellent – great support as always.
Thank you!

[David]

You’re welcome

[Author]

Posts