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!

Hello Ziggy,

I came across this forum while experiencing the same issue on my landing page as Ernest. I have been trying to find a solution for a long time. I set the section height to L and added your code. I found your code effective in removing the scrolling, which initially made me very happy. However, I noticed that the code is removing scrolling for the entire website, not specifically for my landing page. I would greatly appreciate it if you could help me modify the code to apply only to my landing page/home page. Your assistance would be a great help to me.

Here is my website:

https://www.nomadicstudio.ca/

3 hours ago, Mitra said:

I would greatly appreciate it if you could help me modify the code to apply only to my landing page/home page.

Hi Mitra, you can target just one page either by adding the code to the header code injection for just that page, in this case you would wrap it in style tags like this:

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

Alternatively you could do it in Custom CSS and target the page with the Collection ID. You can fin the collection ID with this method:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

and come up with this code specific to your website:

#collection-654705204f702b36dbf5942c {
  html, body {
    overflow: hidden;
  }
}

Hope that helps!

@Ziggy Hi Ziggy, I cannot thank you enough. It seems the first code you gave me worked. I copied that into the header code injection for just my landing page, and it worked. I was so disappointed to find a solution for that, and now I am super happy. Thank you so much. 🙂

1 hour ago, Mitra said:

now I am super happy. Thank you so much. 🙂

That's what I like to hear!

If you can give my post a like, that would be much appreciated!

@Ziggy Sure, I'm just kind of new to this forum and not sure how to do that. I liked your post here; is this what you meant?

1 minute ago, Mitra said:

I liked your post here; is this what you meant?

That's wonderful, thank you!