How make the website background fullscreen and properly scale.

Password: OCA2022PASSWORD

I'm working on setting up an entry page for my site. However the background image does not scale properly and you can see a blue strip at the bottom of the page when resizing the browser and in mobile. (Image attached)

I do not want the header or footer on this specific webpage and used below code to get rid:

<style>
  /* Remove Header Footer */
  header, footer {display:none;}
</style>

Despite the removal of the footer the image is not full screen and does not scale properly when the browser is resized.

I want the background image to behave like in: https://www.kiriako.ca/

Any help would be greatly appreciated.
 

Best,

Ernest

Can you share your website URL? Thanks!

@Ziggy I'm so sorry forgot to include!

Here it is: https://dove-goby-4gnr.squarespace.com/

It looks like you have the section height set to M, if you set it to L (i.e. 100vh) it will fill the height of the screen. 

@Ziggy Thank you for the help, I have set the section height to L and the site now fills the page, however the page still does not scale properly as I'm able to scroll down a bit, I would like there to be no scrolling

@Ziggy Amazing! this has worked like a charm!! Thank you so much!