Archived topic
How to Overlay Stripes & Dots on Background Videos Using CSS ?
7 replies · Started by Bulut on February 7, 2018
Hi,
I bought GP premium almost 1 week ago and i love it. I could manage to solve my issues with "support forum" until now (even i am not so good with codes) but about these Overlays i am stuckt in. I have a header that i created with "Page Headers" and put a mp4 background video. I can put on video an overlay color but i don't want it.
I want to make something like that: http://www.lehelpartners.de/
i found also that: http://www.patternify.com/
, i could manage until
.home-header { background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEjpMcPgAAAABJRU5ErkJggg==
) repeat;
}
this works when i don't have a background as a Video, when i have a background Video than it disappears under of it.
Hi there,
Are you able to link us to your site?
I think we have to load the video in the CSS too as this site suggested:
https://hubskills.com/overlay-stripes-dots-on-background-images-videos/
You can edit the original topic and use the private URL field.
Thanks!
Hi Leo,
when i give a link with a image like that it works: (same like from "hubskills.com")
.home{
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT/GdHE/jMwMDAiC4IFQIpggnABmCCKAEgQAABOBQUaykC8AAAAAElFTkSuQmCC
) repeat, url(https://tikolcom.files.wordpress.com/2015/07/cropped-lkj.jpg); background-position: left top;
background-repeat: repeat;
}
but when i give from my website a link with a video doesn't work
.home{
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT/GdHE/jMwMDAiC4IFQIpggnABmCCKAEgQAABOBQUaykC8AAAAAElFTkSuQmCC
) repeat, url(dumandesign.de/lzm2f.mp4); background-position: left top;
background-repeat: repeat;
}
If you must see my Website nevertheless than i will remove Maintenance page.,
Thanks.
It should be as simple as applying it to the parent container:
.generate-content-header {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT/GdHE/jMwMDAiC4IFQIpggnABmCCKAEgQAABOBQUaykC8AAAAAElFTkSuQmCC) repeat;
}It works. thank you :)))
You're welcome! :)
How can I get this to work, if I put a Slider in the Page Header? With the Slider in Page Header, the pattern is behind the slider.
And if I put a background Image instead of a Video in the header, only the Pattern is visible, but not the Image.
Can you link us to your page with the code added?
