Archived topic
Adding extra Gradient to Blog Post Headers
3 replies · Started by John on February 11, 2020
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!
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) );
}Excellent - great support as always.
Thank you!
You're welcome
