[Resolved] Page Hero Gradient

[gabrielvb1100]

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.

[Elvin]

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. 🙂

[gabrielvb1100]

Hello, Ive added the url to the site i am building

[Elvin]

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.

[gabrielvb1100]

Hello, I did, but now the gradient seems to be overriding the featured image

[Elvin]

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

[gabrielvb1100]

Thank you very much for your help!
It works very cool

[Elvin]

Nice one. glad it works for you. 🙂

[Author]

Posts