How to fix video background overlapping the wrong sections

Introduction

If you have a website which uses a top video background and on top of that video you have a transparent header with logo, menu etc, than it is possible that you have encountered the below problem.

In this article I will not show you how to add a video background for your top menu area or for any other area.

I will only show you how to fix the problem when this video background covers other parts of the page other than the needed one.

Top video background with transparent header

You see this video background on many website today.

It is usually on top area or or on middle sections on a web page.

One thing that I have noticed is that sometimes this top video background covers footer or other sections on the page.

That is a strange thing because the video supposed to be only on top of the page.

One solution which I tried and did not work, was to add z-index to footer:

footer {
  z-index: 999;
}

The solution to prevent top video background to cover other sections on the web page

The solution which I've found it is a pretty simple one.

Where you see that the video background comes over a section or a part of the page you just need to add position: relative; to that section.

For example, if your footer area has a .footer class, you just need to add the below to your styles.css file:

.footer { 
    position: relative;
} 

This should fix the issue.

Conclusion

Hopefully my solution for overlapping video background will save you a lot of time of investigation. Please let me know if this is helpful for you and contact me if you need more info.