Archived topic
Add gradient on top of video
3 replies · Started by David on October 13, 2020
Viewing posts 1–4 of 4
Hello
I've had a video background to a header by following this...
https://docs.generatepress.com/article/page-hero-background-video/
And it's working well...
http://79.170.40.35/meetdevon.org/
How can I add a white gradient over the top to get a similar effect to this...
https://ibb.co/9HF51bp
Thanks
Dave
Hi there,
maybe some CSS like this:
.page-hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 50%);
z-index: 1;
}handy site for creating the gradient background CSS:
Legend - thanks David!
I just had to add a z-index to bring it in front of the video.
Thanks for the CSS gradient link too :)
Glad to hear that - and thx for the z-index spot - updated code above in case others need it!
This archived topic is closed to new replies.
