如何在Squarespace中用CSS实现背景图片全屏宽度显示

我在Squarespace页面上尝试给文本块添加背景图片，当前使用的代码如下，但背景图片无法铺满整个页面宽度，求解决方法：

当前使用代码 #

CSS代码 #

div#block-yui_3_17_2_1_1710885486557_10443{
background: url(https://static1.squarespace.com/static/5fce63b9abf5bd69920abec0/t/5fdade0435c0500e7fa30a42/1608179207346/footer-bg.png);
 padding-top:40px;
 padding-bottom:40px;
    background-size: cover!important;
 width: 100%;
 font-size: 13px; 
 background-repeat: no-repeat;
 background-position: center;
 color: #666;
 margin-bottom:-85px;
 margin-top:20px;
}

HTML代码 #

<div id="#block-yui_3_17_2_1_1710885486557_10443"></div>

修复方案 #

1. 修正HTML的ID错误 #

HTML里的ID多了一个#号，导致CSS选择器无法正确匹配元素。把HTML代码改成：

<div id="block-yui_3_17_2_1_1710885486557_10443"></div>

2. 修改CSS突破容器限制 #

Squarespace的默认容器会有左右内边距或最大宽度约束，需要添加偏移属性让元素铺满视口宽度。替换为以下CSS代码：

div#block-yui_3_17_2_1_1710885486557_10443 {
    background: url(https://static1.squarespace.com/static/5fce63b9abf5bd69920abec0/t/5fdade0435c0500e7fa30a42/1608179207346/footer-bg.png);
    padding: 40px 20px; /* 保留上下内边距，添加左右内边距避免文本贴边 */
    background-size: cover;
    width: 100vw; /* 直接设置为视口宽度 */
    font-size: 13px;
    background-repeat: no-repeat;
    background-position: center;
    color: #666;
    margin: 20px 0 -85px;
    /* 关键：让元素左右偏移抵消父容器的宽度限制 */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

3. 可选：解决横向滚动条问题 #

如果页面出现横向滚动条，给该元素的直接父容器添加溢出隐藏样式（替换成实际的父容器选择器，比如.sqs-block-content）：

.sqs-block-content {
    overflow-x: hidden;
}

内容的提问来源于stack exchange，提问作者Kourtney Kearney