[Resolved] How to Overlay Stripes & Dots on Background Videos Using CSS ?

[Bulut]

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.

[Leo]

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!

[Bulut]

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.

[Tom]

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;
}

[Bulut]

It works. thank you :)))

[Tom]

You’re welcome! 🙂

[Oliver]

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.

[Leo]

Can you link us to your page with the code added?

[Author]

Posts