通过自定义CSS将固定背景添加到Squarespace模板- Mobile问题

Question

我正在尝试使用York模板将固定的背景图像添加到我的Squarespace站点。可在此处查看网站(www.newinkmedia.co)。

开箱即用，York模板不支持固定的背景图像，因此我采用自定义CSS路线。我想背景图像是居中，包含和固定时，用户滚动。在桌面上一切似乎都很好，但在移动设备上遇到了一些问题，因为图像被放大了，没有修复。

屏幕截图和自定义CSS如下：

Desktop Screenshot

Mobile Screenshot #1

Mobile Screenshot #2

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    background-image: url("https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg");
}

让我知道你的想法。非常感谢你的帮助。

Answer 1

我的一位开发人员朋友向我指出了以下solution。我在下面粘贴了修改后的CSS以包含& center。通过iPhone 7在移动Chrome和Safari上似乎工作得很好。

​

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg) no-repeat center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

​