Jump to content

How to make a background image fill any browser height? 7.1

Recommended Posts

Hello,

So the home page of my site should ideally be static with no scrolling. The first issue I run into, is that when previewing my page, the background image has a white bar (negative space) at the bottom due to the content not going down the page far enough.

To fix this, I add a spacer at the bottom and extend so that the preview doesn't have any bar or scrolling.

However, this is only true for the browser size of my preview, for example, when I fullscreen my browser, the negative space is back because the page is larger and the content once again doesn't go down the page far enough.

Adding a longer spacer to cover all grounds is not ideal as I would not like the page to scroll, however, adding code to remove scrolling will also remove the scroll on mobile, where the page won't show everything.

The site isn't published so I'm unfortunately not able to provide a visual example.

Is there any way to make the page automatically fill to the broswer size? Or alternatively, is there an easier fix for my issue?

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...

Hi! @tuanphan I still have this issue! I deleted the header and footer on just one page to have a cover page, however the video background does not extend fully based on the browser size and there ends up being a white space at the bottom, even if I make the section longer. Ideally, I don't want any scrolling, and no white space at all under the image if the browser size is larger. Any help would be appreciated, thank you! 

url: marugarciastudio.com

PW: studio  

Link to comment
12 hours ago, Gigie_Hall said:

Hi! @tuanphan I still have this issue! I deleted the header and footer on just one page to have a cover page, however the video background does not extend fully based on the browser size and there ends up being a white space at the bottom, even if I make the section longer. Ideally, I don't want any scrolling, and no white space at all under the image if the browser size is larger. Any help would be appreciated, thank you! 

url: marugarciastudio.com

PW: studio  

Don't remove any code in your current code. Add this to Page Header

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.