[Resolved] Header gradient overlay over image

[David]

Hello

Im looking to add a gradient from green to transparant on my header images, any help on how to do this…

http://185.20.51.60/~hiremarqueeco/

Thanks
Dave

[Leo]

Hi there,

You can use this site to generate the desired gradient:
https://cssgradient.io/

Then add this CSS:

.page-hero {
    background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.46262254901960786) 35%, rgba(0,212,255,1) 100%), url(http://185.20.51.60/~hiremarqueeco/wp-content/uploads/2019/02/LED-uplighters-with-Festoon.jpg);
}

Just replace the linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.46262254901960786) 35%, rgba(0,212,255,1) 100%) with the actual desired gradient generated from the link above.

Let me know if this helps 🙂

[David]

Thanks Leo

[Leo]

No problem 🙂

[David]

Hi

How can I get a gradient overlay to sit on top of a featured image?

Thanks
Dave

[David]

Don’t worry, sorted.

[David]

Glad to hear that you got it resolved.

[Author]

Posts