修复 Squarespace 页面上的全屏背景图像

Question

我在使用方形space 页面获取背景图像以全屏显示（占据整个背景space）时遇到问题。我的 CSS 正在工作，但不知何故停止工作，现在屏幕底部有一个空隙。我一直在使用 Squarespace 以及它如何为您设置 HTML 的问题，所以重新创建这个问题真的没有帮助。相反，您可以在 richiequake.com 查看页面并使用密码 Help123 访问它。此问题发生在页面的桌面版和移动版中。这是我的 CSS 桌面版：

#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;
}

我一直在尝试移动设备：

@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;
  }
}

我认为我的问题是 HTML 元素占用了屏幕底部的 space，但我找不到这个元素，也没有找到方法让背景图片占据整个space。我的 CSS 代码需要什么来解决这个问题？我是否在错误的 HTML 元素上使用了 CSS？

Answer 1

要仅解决该特定图像背景的高度，请添加以下内容：

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

将其添加到您已有的 #collection-5de6d28545f1a7075b7a2741 #canvas{...} 规则中，这应该有效。请注意，11px 是基于您当前拥有的 padding-top 的值。如果您要更改该值，您也希望在 min-height 规则中进行类似的更新。

做的就是说，基本上是"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"。

修复 Squarespace 页面上的全屏背景图像

Fix full screen background image on Squarespace page

html

css

responsive-design

squarespace