[Resolved] Removing page’s body background color from video header

Home Forums Support [Resolved] Removing page’s body background color from video header

Home Forums Support Removing page’s body background color from video header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1642495
    ch1800

    Hello,

    I’m working on this video header and it gets the page’s body background color (#dddddd) as overlay.
    Is there a way either to get the video without any overlay or at least being able to specify a different background for the video without getting any interference from the page’s body background?

    The element settings for the video header have no background color specified.

    Thanks!

    #1642693
    Elvin
    Staff
    Customer Support

    Hi there,

    I’ve checked your site and the video doesn’t have an overlay.

    The “overlay” appearance you see is because of the video having an opacity value of 0.5.

    This means you’re seeing background color through the video instead it of having an overlay color.

    We can try to change the opacity value of the video by using this CSS:

    video.background-video {
        opacity: 1;
    }

    This is what it will look like: https://share.getcloudapp.com/X6u9BPo9

    A wise man once said:
    "Have you cleared your cache?"

    #1642711
    ch1800

    Yep, that’s right I missed this opacity setting I had from another site.
    That’s correct it now works fine as the original video but, of course, doesn’t work so fine with the menu and I also lose the negative top width of the boxes below…

    Is there a way to still add a RGB overlay to the video or does it need the opacity thing?

    #1642729
    Elvin
    Staff
    Customer Support

    You can try adding this CSS:

    .page-hero:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(25,25,25,0.5);
        z-index: 1;
    }

    Change the background-color value to your preference. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1642736
    ch1800

    Great, that works fine indeed!

    Now, what about the 2 “WP Show Posts” boxes below?
    Is there a way, by any chance, to bring them on top of the video so that I still get the effect of the negative top margin?

    #1642778
    ch1800

    OK, I think I found how to make it work with z-index.
    I’ll play around a bit more with this, no problem.

    Thanks a lot for your help!

    #1643610
    Elvin
    Staff
    Customer Support

    Nice one. No problem. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

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