Fix full screen background image on Squarespace page

问题

I'm having issues getting background images to display full screen (take up the whole background space) with a Squarespace page. My CSS was working but somehow it stopped working and now I have a gap on the bottom of the screen. The issues i've been having with Squarespace and how it sets up HTML for you, so recreating this issue really does not help. Instead, you can view the page at richiequake.com and use the password Help123 to access it. This issue happens in the Desktop version and Mobile version of the page. This is my CSS for Desktop:

#collection-5de6d28545f1a7075b7a2741 #canvas{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

For mobile I've been trying:

@media only screen and (max-width: 400px) {
  #collection-5de6d28545f1a7075b7a2741 .canvas{
    max-width: 100% !important;
    max-height: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

I think my issue is with an HTML element that is taking up the space at the bottom of the screen, but I can't find this element and have not found a way to have the background image take up the whole space. What do I need in my CSS code to fix this? Am I using CSS on the wrong HTML element?

回答1:

To address just the height of that particular image background, add the following:

min-height: calc(100vh - 11px);

Add it within the #collection-5de6d28545f1a7075b7a2741 #canvas{...} rules you already have and that should work. Note that the 11px is based on the value you currently have for padding-top. If you were to change that value, you'd want to similarly update it within the min-height rule as well.

What that is doing is saying, basically "if the content of the page isn't tall enough to fill the current height of the browser window, use a minimum height of however tall the browser is, minus the padding-top amount on the element".

来源：https://stackoverflow.com/questions/59849401/fix-full-screen-background-image-on-squarespace-page

标签

html

css

responsive-design

squarespace