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

Can you share your website URL? Thanks!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

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 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (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 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment
  • 1 year later...

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/

Link to comment
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!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment

@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. 🙂

Link to comment
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!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, Mitra said:

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

That's wonderful, thank you!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (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.