I’m trying to add a blue color overlay to my video background with some opacity so that the text over the video is easier to read. And it would be great if i could have different settings or no color on other pages.

I’ve been searching the forum, trying some CSS tips, but I can’t figure it out.

http://club-van-100.nl/website/

Thx!

Thanks for writing in!

Please add following CSS under Custom > CSS in the Customizer:

.home #x-section-1 .x-video.player.bg:before {
    content: '';
    background: rgba(39, 69, 145, 0.44);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.home #x-section-1 .x-video.player.bg + .x-container {
    position: relative;
    z-index: 10;
}

This will only be applied on the homepage.

Thanks!

How can i edit the code if i want to use it on an other page with maybe an other color or less opacity?

thx in advance.

If you want to apply this on other pages, you need to remove the .home on the selector. To change the background color you can update the rgba value with this table. The last value there (0.44) is the alpha which is the opacity of your background colour.

e.g.
background: rgba(0, 128, 128, 0.5); /*this would result to an light semi-transparent blue*/

Hope this shed some lights, Cheers!

On the home page of the site I now have the video background with a semi-transparent blue overlay. On the other pages I would like to have a background image. How can i apply the same semi-transparent blue overlay over the background images?

Thx in advance!

For that, you can add a CSS class for example blue-overlay to your section and following CSS code under Custom > CSS in the Customizer:

.x-section.blue-overlay {
    position: relative;
}

.x-section.blue-overlay:before {
    content: '';
    background: rgba(39, 69, 145, 0.44);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
}

.x-section.blue-overlay .x-container {
    position: relative;
    z-index: 10;
}

Thanks!