求助：如何用CSS修改Squarespace指定索引页面区块背景？

问题场景 #

在Squarespace的SeacureAdvisors索引页面（对应站点：https://www.seacureadvisors.com/seacureadvisors）中，需要为「Seacure Advisors Button Section」（即「关于我们」区块）设置自定义背景图，尝试以下两段CSS代码均未生效：

#seacureadvisors #seacure-button-section {
    background-image: url(https://static1.squarespace.com/static/5fce63b9abf5bd69920abec0/t/5fd2163da9eaf43bd85bc941/1607603780287/who+we+are+bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

div#block-c509aa91e20e639c15e8 {
    background-image: url(https://static1.squarespace.com/static/5fce63b9abf5bd69920abec0/t/5fd2163da9eaf43bd85bc941/1607603780287/who+we+are+bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

解决方案 #

代码修正 #

将以下代码添加到Squarespace后台的「设置 > 高级 > 自定义CSS」中：

/* 为目标区块设置背景图，确保选择器优先级与匹配准确性 */
#seacureadvisors .sqs-block[data-block-id="c509aa91e20e639c15e8"] {
    background-image: url('https://static1.squarespace.com/static/5fce63b9abf5bd69920abec0/t/5fd2163da9eaf43bd85bc941/1607603780287/who+we+are+bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 300px; /* 保证区块有足够高度显示完整背景 */
    padding: 2rem 0; /* 可选：增加内边距，优化内容与背景的视觉关系 */
}

/* 移除区块内容容器的默认背景色，避免遮挡背景图 */
#seacureadvisors .sqs-block[data-block-id="c509aa91e20e639c15e8"] .sqs-block-content {
    background-color: transparent !important;
}

失效原因说明 #

1. 第一段代码的#seacure-button-section选择器无效：Squarespace不会自动将页面名称转换为DOM ID，因此该选择器无法匹配目标区块。
2. 第二段代码的动态ID存在风险：#block-c509aa91e20e639c15e8是区块的临时动态ID，编辑页面或更新模板后可能被变更；同时区块内部的.sqs-block-content容器默认带有背景色，会完全遮挡设置的背景图。

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