如何在 Squarespace 中使用 css 使背景图像跨越页面的整个宽度

Question

我正在尝试将自定义 CSS 添加到 Squarespace 页面，该页面将在该页面的文本块后面添加背景图像：https://www.seacuradvisors.com/seacure-advisors。

我添加到页面的代码是：

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

如何让图像跨越页面的整个宽度？

Answer 1

如果实际上无法将该内容添加到其自己的设置为全宽的部分（而不是主体的一部分），则将以下 CSS 添加到您在问题中发布的 CSS ，将实现您正在寻找的全角效果。

width: calc(100vw - 17px);
margin-left: calc((100vw - (100% + 17px)) / -2);
box-sizing: border-box;

作为先行说明，如果您要通过 CSS 编辑器而不是像您那样通过

style

标签添加 CSS，则由于 Squarespace 的 LESS 编译器中的错误，您将必须使用以下内容而不是上面的内容：

width: ~"calc(100vw - 17px)";
margin-left: ~"calc((100vw - (100% + 17px)) / -2)";
box-sizing: border-box;