微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将背景图片添加到 squarespace 网站标题

如何解决将背景图片添加到 squarespace 网站标题

我正在尝试将背景图像添加到我正在处理的 Squarespace 网站的标题中。我已经通过他们论坛中建议的以下代码取得了一些成功:

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

然而,它只覆盖主导航区域,而不是整个标题区域。我希望它看起来像这样:

Header Example

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

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

有人有解决办法吗?

干杯,

M.

附言我只是通过转到设计>>CSS 然后插入带有页面集合 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;
}

解决方法

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

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

填充:75px 在网站上的内容周围创建空格,使您的页眉周围有空格,为了处理这个问题并实现您想要的,将此 CSS 代码添加到页眉元素

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。