Site logo

Archived topic

Header gradient overlay over image

6 replies · Started by David on February 12, 2019

Viewing posts 1–7 of 7

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

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 :)

Thanks Leo

No problem :)

Hi

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

Thanks
Dave

Don't worry, sorted.

Glad to hear that you got it resolved.

This archived topic is closed to new replies.