修复 Squarespace 页面上的全屏背景图像 [英] Fix full screen background image on Squarespace page

问题描述

我在使用 Squarespace 页面获取背景图像以全屏显示(占据整个背景空间)时遇到问题.我的 CSS 正在工作，但不知何故它停止工作，现在我在屏幕底部有一个间隙.我在 Squarespace 上遇到的问题以及它如何为您设置 HTML，因此重新创建此问题确实无济于事.相反，您可以在 richiequake.com 上查看页面并使用密码 Help123 访问它.此问题发生在页面的桌面版本和移动版本中.这是我的桌面 CSS:

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

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

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?

推荐答案

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

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

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

将它添加到您已经拥有的 #collection-5de6d28545f1a7075b7a2741 #canvas{...} 规则中，这应该会起作用.请注意，11px 基于您当前为 padding-top 设置的值.如果您要更改该值，您还需要在 min-height 规则中类似地更新它.

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.

那是说，基本上如果页面的内容不够高，无法填充浏览器窗口的当前高度，则使用浏览器高度的最小高度，减去padding-top数量在元素上".

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".

这篇关于修复 Squarespace 页面上的全屏背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！