Squarespace - 手机上的不同背景图像？使用带有任务模板的封面

我的妻子暂时在她的网站上使用封面 - 我们希望在桌面上使用不同的背景图片。我是一个完整的新手然而走过了封页上的高级设置选项卡中注入的CSS，并插入以下内容：Squarespace - 手机上的不同背景图像？使用带有任务模板的封面

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

，它不工作。我究竟做错了什么？任何人可以提供帮助将不胜感激。

我可以根据需要提供网站URL。

来源

2017-01-22 Brett Williams

对于屏幕比480px窄的屏幕，您正在使用640x1136px背景图像，但不调整背景大小。另外，您的图片顶部有一个大的空白区域。我认为图像加载，但您只能看到图像的顶部，画出它不加载的错误结论。

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

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

的关键是background速记，这也可以作为background-size: contain;
其他可能的值分别写入的/contain部分包括：

cover（图像被裁剪但覆盖元素），
Length（在px，em，rem，vw，cm，in等...），
auto（原始大小 - 也默认 - 你现在看到的是什么），
initial（重置为初始状态）
inherit（适用父母的财产）

来源

2017-01-22 15:37:32

嗨那里。这工作像一个魅力。尽管我相信Squarespace封面模板“覆盖”了所有内容，并将其作为白色背景。我想知道是否有方法来覆盖它？请参阅：www.ivyrowdesign.com –

糟糕，我也想说感谢！ –

'div.sqs-slide {background：transparent;}'似乎可以做到这一点。 –

Squarespace - 手机上的不同背景图像？使用带有任务模板的封面

回答

相关问题