Background upper layer not displaying on video header

I’ve created a header with a background video, however the background upper layer will not display as an overlay to the video.

I’ve seen this done to get the desired effect i want however can’t seem to get it to work.

Please help

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

http://77.104.134.106/~transf54/jacksonhogg.com/

This is the temporary URL.

After some more investigation have found that the overlay effect will not work in Safari but does work in Chrome and firefox.

Hi There,

Thank you for the URL. Would you mind giving us screenshot of what you want to achieve? Then would you mind providing us with login credentials so we can take a closer look on your header setup? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Hi

The layer effect i am trying to achieve can be seen by visiting the homepage link in chrome browser, you will see the coloured overlay. However this does not happen in safari web browser, is there any reason for this or is it a bug.

Thanks

Hello There,

Thank you for the clarifications. This could be a bug. I will be reporting this to our developers. Meanwhile, to resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

.x-bg-layer.x-bg-layer-upper.x-bg-layer-color {
    z-index: 1;
}

Hope this helps. Please let us know how it goes.