[Resolved] GP Post Hero and background gradient over image

[Alessandro]

Hi,
in element -> Post Hero I use the background image and background color in transparency.
I would like to replace linear-gradient es:

.page-hero {
     background-color: rgba (255,255,255,0.51);
     background-image: url (mysite + myimage.jpg);
     background-size: cover;
     background-image: linear-gradient (0deg, rgba (255,255,255,0.51), rgba (255,255,255,0.51)), url (mysite + myimage.jpg);
     background-repeat: no-repeat;
     padding-top: 80px;
     padding-bottom: 140px;
     box-sizing: border-box;
}

with:
.page-hero {
background: rgb (252,239,239);
background: linear-gradient (140deg, rgba (252,239,239,1) 13%, rgba (227,107,113,0.4780287114845938) 47%, rgba (189,60,142,0.5172443977591037) 100%);
}

but if I insert the css in the child in this way, I lose the background image (image in evidence) dynamically inserted.

How can I do?

[Tom]

Hi there,

As of right now the gradient stuff is hard-coded in, unfortunately. I’ll see if I can make it filterable in 1.11.0 🙂

[Alessandro]

thankyou 🙂

[David]

Hi there,

you can use the CSS i provide here to add a Gradient Overlay to your Header Element:

https://generatepress.com/forums/topic/background-overlay-supersedes-background-image-in-page-hero-element/#post-930725

[Alessandro]

Thank you David! 🙂

[David]

You’re welcome

[Author]

Posts