Jump to content

How can I make my landing page background image responsive on different screens without encountering scrolling or white borders

Recommended Posts

Hello everyone,

I'm encountering a challenge with my landing page/homepage. I want the background image on my landing page to consistently fit the screen across various screen sizes, including desktop and mobile. Currently, it appears to fit well on my screen, but when viewed on different browsers, it either becomes scrollable or acquires an added white border.

Following advice from customer support, I attempted to resolve this by adding the image as an image block that stretches across the entire section, rather than using it as a background image for the section. However, this adjustment didn't address the main issue.

Here is my website: https://www.nomadicstudio.ca/

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, Mitra said:

I want the background image on my landing page to consistently fit the screen across various screen sizes, including desktop and mobile.

@Mitra For simplicity, I would add a Classic section (as opposed to a Fluid Engine section), set the section to Large (100) in both width and height and then add background image.

Unless I've misunderstood what you want to achieve?

image.thumb.gif.01d2220c60569192398307efafa2f2dc.gif

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Hi Paul,

I appreciate your response regarding my concern with the website layout. I'm a bit unclear about what you mean by the "classic section" and whether it would address the issue I'm facing. I've attached some screenshots to illustrate my point more clearly.

The problem I'm encountering is that the background image on my landing page doesn't display properly across various monitors, browsers, and mobile devices. Each screen seems to automatically add some white borders or margins at the bottom of the image. What I'm aiming for is to find a solution, ideally through code or an alternative method, that ensures the background seamlessly fits edge to edge and occupies the entire screen on devices of different sizes, including mobile devices. The attached photos illustrate the problem in detail.

For reference, I like the adjustment of the background image on this website (https://www.emileemcgovern.com/), where it spans perfectly across all devices without creating any borders. This is precisely the outcome I'm striving for on my own website.

photo_2024-01-16_12-26-04.jpg

sasasasa.JPG

Link to comment

Do you want to achieve something like my screencast above, where the height fills the browser?

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Yes, I want the height to fill the browser, and in my Chrome browser, it does fill the entire window. However, what should I do to ensure that the height consistently fills the entire window in various browsers?

Link to comment

 

Hi Paul, sorry to bother you again. I really need help with this issue as I launched my website, and it does not look the way it's supposed to. Do you think there is any way to fix this?

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.