在 Squarespace 网站上的某些页面上删除移动视图中的背景标题图像

如何解决在 Squarespace 网站上的某些页面上删除移动视图中的背景标题图像

网站网址是：http://www.georjart.com/paintings-new

密码是：M6NYey7f

我已使用以下代码将背景图片添加到此 Squarespace 网站上特定页面的页眉：

#collection-6058d724f45e96664a810213 header#header {
    background-image: url(https://www.emergentcreative.co.uk/wp-content/uploads/2021/04/Gart-BG-Header-Example-1-2.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 9px;
    padding: 40px
}

但是，当我转到移动视图时，它看起来像这样：

我可以看到问题出在“位置”和“背景图像”代码上，通过进入 Chrome 中的开发工具，我可以编辑以下媒体查询：

@media only screen and (max-width: 750px)
#header {
    background-image: none !important;
    position: inherit !important;

}

我可以让它看起来很正常：

但是，我不确定如何将此代码添加到 Squarespace 中的 CSS 编辑器中，更不用说在特定页面上添加此代码了，因为更改尚未生效。

有人有解决办法吗？

干杯，

M.

解决方法

使用您的绝对定位标题的方法作为起点（并且不修改该方法），我将执行以下操作来代替您现在拥有的内容。

#collection-6058d724f45e96664a810213 #header {
  background-image: url("https://www.emergentcreative.co.uk/wp-content/uploads/2021/04/Gart-BG-Header-Example-1-2.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

@media only screen and (min-width: 750.1px) {
  #collection-6058d724f45e96664a810213 #header {
    margin-bottom: 9px;
    padding: 40px
  }
}

@media only screen and (max-width: 750px) {
  #collection-6058d724f45e96664a810213 #header {
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-right: 20px;
    padding-left: 20px;
  }
}