使用 Squarespace 获取背景图像以显示整页的问题

Question

我得到了这个 CSS 代码，可以在我正在处理的 Squarespace 网站中显示整页背景图片：

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

但是，在网站的主页中，背景图像卡在页面的上部。图片足够大，可以拉伸以适合整个页面。在您使用 Squarespace 编辑器时获得的预览中，代码似乎达到了目的，但是一旦您真正进入该页面，它就无法正常工作，因为黑色 space 占据了大部分屏幕。要查看问题，您可以转到 https://www.richiequake.com/ 并使用密码 Help123 进行查看。因为我不太熟悉 Squarespace 如何为您构建 HTML 代码，所以我不知道问题是否与我的 CSS 或某些 HTML 有关] 元素。如何让背景图片显示整页？

更新

根据 Brandon 的建议，我设法让图像从上到下占据了页面，但是在宽度上图像两边仍然有黑色 spaces。

现在我正在使用：

#collection-5de6d28545f1a7075b7a2741 #canvas{
  background-position: center top !important;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 11px);
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)
}

有了这个 CSS 我可以让背景图片几乎占据整个页面，除了左边还有一个黑色 space。此外，这个 cas 导致图像被放大，所以即使它正在拍摄我想要的 space，图像现在被放大到图像的一部分。

Answer 1

如前所述，您可以使用以下方法解决此问题 CSS：

#collection-5de6d28545f1a7075b7a2741 #canvas {
  min-height: calc(100vh - 11px);
}

查看链接答案以了解其工作原理。

Answer 2

请尝试在现有网站 css 上为 canvas

添加以下 css

#collection-5de6d28545f1a7075b7a2741 #canvas {
    width: 100%;
    height: 100%;
    min-height: calc(89vh);
    background: url(https://static1.squarespace.com/static/5cff45a…/t/5dc6fce…/1573321963518/richie_+5.jpeg);
    box-sizing: border-box;
    margin: 0;
    max-width: none; 
}

使用 Squarespace 获取背景图像以显示整页的问题

Issue with getting background image to display full page using Squarespace

html

css

background-image

squarespace