Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support How to Overlay Stripes & Dots on Background Videos Using CSS ?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #490688
    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.

    GP Premium 1.5.6
    #490931
    Leo
    Staff
    Customer Support

    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!

    #491125
    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.

    #491700
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #491894
    Bulut

    It works. thank you :)))

    #492331
    Tom
    Lead Developer
    Lead Developer
    #507288
    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.

    #507416
    Leo
    Staff
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.