Archived topic
Page Hero Gradient
7 replies · Started by gabrielvb1100 on January 26, 2021
Hello
Is there a way to set up a gradient for the "Background Overlay " > Background Color" in a post header type "Header" in the Elements section, but still use the featured image?
I am trying this code
.posthero {
background: rgb(1,87,233);
background: linear-gradient(180deg, rgba(1,87,233,0.5) 13%, rgba(50,64,154,0.5) 100%);
}
but it is not taking it.
Thx.
Hi there,
Can you link us to the page in question? So we could check if the selectors used matches.
You can use the private information text field to provide the site details. Thank you. :)
Hello, Ive added the url to the site i am building
Hello, Ive added the url to the site i am building
Thank you.
I've inspected the site and found that the class assigned to the Header Element doesn't match with the CSS selector you're using.
Within the page-hero's classlist you have postshero which doesn't match .posthero you use on your CSS selector. https://share.getcloudapp.com/YEuXNg1B
To fix this, change the class within the Header Element to match the CSS selector you're using.
Hello, I did, but now the gradient seems to be overriding the featured image
Try using this CSS instead:
.postshero {
position: relative;
}
.postshero:before {
background: rgb(1,87,233);
background: linear-gradient(180deg, rgba(1,87,233,0.5) 13%, rgba(50,64,154,0.5) 100%);
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.postshero .inside-page-hero {
z-index: 1;
position: relative;
}Thank you very much for your help!
It works very cool
Nice one. glad it works for you. :)
