将背景图片添加到 squarespace 网站 header

Question

我正在尝试将背景图片添加到我正在使用的 Squarespace 网站中的 header。我已经成功地使用了他们论坛中建议的以下代码：

header#header {
    background-image: url(Image URL Here);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

但是我只覆盖了主导航区域，而不是整个 header 区域。我希望它看起来像这样：

然而，在这个示例页面中它看起来像这样，我将代码添加到：

https://matthew-kern-drzz.squarespace.com/paintings-new

有人有解决办法吗？

干杯，

男.

P.S。我只是通过转到设计>>CSS 然后将 CSS 与页面的 collection ID 插入 CSS 来将代码添加到此页面：

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

Answer 1

仔细查看您的网站 https://matthew-kern-drzz.squarespace.com/paintings-new 后，我注意到该网站包裹在 <div class="canvas"> 中，其中包含 css

#canvas {
    max-width: 1200px;
    margin: 0px auto;
    padding: 75px;
}

padding: 75px 在网站内容周围创建空间，使您的 header 周围有空间，要处理此问题并实现您想要的效果，请添加此 CSS 代码到 header 元素

#header{
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 9px;
}

将背景图片添加到 squarespace 网站 header

Add background image to squarespace website header

css

navigation

header

background-image

squarespace