Jump to content

How make the website background fullscreen and properly scale.

Go to solution Solved by Ziggy,

Recommended Posts

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

ISSUE.jpg

Edited by OCAtechman
Link to comment

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. 

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Looks like it's working for me, no scrolling. But you can make sure of that by adding this to your Custom CSS:

html, body {overflow: hidden;}

Give me a thumbs up if that works, thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.