Archived topic
Header gradient overlay over image
6 replies · Started by David on February 12, 2019
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.