Q:

How to achieve background image that is the size of the viewport

Many websites use this, but https://modsquad.com/ was the first example I found. When you visit the site their background image (video in this case) is the full width and length of whatever screen you are viewing it on, directly below it is separate content, but you only see the video prior to scrolling down. How do you achieve this? In my search for the answer to this question I have only seen examples that set the entire html background to a certain image, which is not what I am looking for. Thanks in advance for help.

A:

Visit here : https://modsquad.com/ , and open console, you can see what they do.

When the browser is resized, the video(or image) changes its height.
You can do it via javascript, read this question : JavaScript - Get Browser Height

