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

[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!

[Elvin]

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

[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?

[Elvin]

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. 🙂

[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?

[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!

[Elvin]

Nice one. No problem. 🙂

[Author]

Posts