Squarespace

Question

我妻子正在为她的网站临时使用封面 - 我们希望在移动设备上使用与桌面设备不同的背景图片。我是一个完全的新手，但是已经通过封面的“高级设置”选项卡注入 CSS 并插入了以下内容：

    <style>
    @media screen and (max-width: 480px) {
         body {
              background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg');
         }
    }
    </style>

而且它不起作用。我究竟做错了什么？如果有人能提供任何帮助，我们将不胜感激。

如果需要，我可以提供网址URL。

Answer 1

您正在为比 480px 窄的屏幕使用 640x1136px 背景图像，但未调整背景大小。此外，您的图片顶部有一个大的白色 space。我认为图像已加载，但您只看到图像的顶部，从而得出图像未加载的错误结论。

这应该在小型设备上显示图像：

@media (max-width: 480px) {
  body {
    background: 
      white
      url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg')
      no-repeat 
      center 
      /contain;
    min-height: 100vh;
    margin: 0;
  }
}

关键是backgroundshorthand的/contain部分，也可以单独写成background-size: contain;
其他可能的值包括：

cover（图像被裁剪但覆盖了元素），
Length（在px、em、rem、vw、cm, in 等...),
auto（原始大小 - 也是默认大小 - 你现在看到的），
initial（重置为初始状态）
inherit（应用 parent 的属性）

Squarespace - 移动设备上的不同背景图片？使用带有任务模板的封面

Squarespace - different background image on mobile? Using a Cover Page with Mission template

css