Jump to content

Background image height cut-off

Go to solution Solved by Lucky_night_studio,

Recommended Posts

Hello everyone,

I'm having a few problems with my background image across both desktop and mobile views:

http://www.indetailstudio.com

Desktop:

Background image won't fill entire height of screen and requires scrolling - I've had success with code to prevent the scroll bar from showing, but this just cuts-off the image

Mobile:

Background image is cut-off and won't scroll at all, even after removing custom code to prevent scrolling.

 

Example images attached of both desktop and mobile issues.  I'd appreciate any help on this - thanks!

Screenshot_20240630_083648_Chrome.jpg

Screenshot 2024-06-30 083534.jpg

Screenshot 2024-06-30 083509.jpg

Screenshot 2024-06-30 100134.jpg

Edited by NolaP412
Link to comment
  • Replies 2
  • Views 298
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

Yeah the options with the background image is limited. I would suggest adding the background image using custom css for the page.  So something like this should help:

 

body {
   background-color: #fed444;
   background-image: url(...);
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: cover;
}

This should be easier for the styling, than trying to use the squarespace options

Link to comment
56 minutes ago, Lucky_night_studio said:

Yeah the options with the background image is limited. I would suggest adding the background image using custom css for the page.  So something like this should help:

 

body {
   background-color: #fed444;
   background-image: url(...);
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: cover;
}

This should be easier for the styling, than trying to use the squarespace options

Thank you so much, that worked perfectly!

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.