有关使用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编辑器时看到的代码似乎是达到目的的，但是，一旦您实际转到页面后，它就无法正常工作，因为黑色空间占据了大部分屏幕。要查看该问题，您可以转到https://www.richiequake.com/并使用密码Help123进行查看。因为我不太了解Squarespace为您构造HTML代码的方式，所以我不知道问题是否与我的CSS或某些HTML元素有关。如何获取背景图像以显示整页？

UPDATE

根据布兰登的建议，我设法使图像从上到下占据页面，但是在宽度上图像的两边仍然有黑色空间。

现在我正在使用：

#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，我可以使背景图像占据几乎所有页面，除了左侧仍有黑色空间。同样，这个cas导致图像被放大，因此即使认为它占用了我想要的空间，图像现在也被放大到图像的一部分。

Answer 1

如上所述here，您可以使用以下CSS来解决此问题：

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

请参阅链接的答案以获取有关其工作原理的说明。