How to make a background image fill any browser height? 7.1

Hello,

So the home page of my site should ideally be static with no scrolling. The first issue I run into, is that when previewing my page, the background image has a white bar (negative space) at the bottom due to the content not going down the page far enough.

To fix this, I add a spacer at the bottom and extend so that the preview doesn't have any bar or scrolling.

However, this is only true for the browser size of my preview, for example, when I fullscreen my browser, the negative space is back because the page is larger and the content once again doesn't go down the page far enough.

Adding a longer spacer to cover all grounds is not ideal as I would not like the page to scroll, however, adding code to remove scrolling will also remove the scroll on mobile, where the page won't show everything.

The site isn't published so I'm unfortunately not able to provide a visual example.

Is there any way to make the page automatically fill to the broswer size? Or alternatively, is there an easier fix for my issue?

Do you still need help on this? If yes, can you share site url? We can check easier.

Hi! @tuanphan I still have this issue! I deleted the header and footer on just one page to have a cover page, however the video background does not extend fully based on the browser size and there ends up being a white space at the bottom, even if I make the section longer. Ideally, I don't want any scrolling, and no white space at all under the image if the browser size is larger. Any help would be appreciated, thank you! 

url: marugarciastudio.com

PW: studio  

12 hours ago, Gigie_Hall said:

Hi! @tuanphan I still have this issue! I deleted the header and footer on just one page to have a cover page, however the video background does not extend fully based on the browser size and there ends up being a white space at the bottom, even if I make the section longer. Ideally, I don't want any scrolling, and no white space at all under the image if the browser size is larger. Any help would be appreciated, thank you! 

url: marugarciastudio.com

PW: studio  

Don't remove any code in your current code. Add this to Page Header

<style>
  html, body {overflow: hidden;}
</style>

PERFECT! Thank you so much!