如何在CSS中包含图像到标题（以及内容）？

Question

在my website上我已添加背景（在联系页面上）。但是，当我放入背景时，它不会覆盖标题。它是在主页面上完成的，而不是在联系页面上完成的？我试过用

#siteWrapper{
  background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

所以在这里，它将背景放入并使用background-size: 100%;将其适合屏幕，但这只是将其放在内容上。我试图将背景放在身体上然而却把它放在了内容之后。所以主要目标是尝试将背景包含在标题和内容中（如主页）。 - 谢谢

Answer 1

#site{
  background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

从以下位置删除标题：

body.transparent-header:not(.has-banner-image) #header {
    background-color: #100806;
    position: relative;
} //site.css line 10

Answer 2

尝试在#site元素上设置背景图片。

Answer 3

解决方案＃1：

您在联系页面上使用position: relative作为标题，但在主页上使用absolute。

将此CSS用于除主页之外的所有页面：

header {
    position: absolute;
    top: 0;
    left: 0;
    background: none;
}
#siteWrapper {
    padding-top: 106px; /* leave some space for header */
}

解决方案＃2：

在#site上移动背景图片，然后删除黑色背景：

#site {
    position: relative;
    background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
header,
#siteWrapper {
    background: none;
}

---

图片的标题说明：

请注意，Submit按钮可能会出现在背景图片中闪电区域的正确位置，使其无法读取：

Answer 4

CSS更改：

//将此#site css更改为

    #site {
 background: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png") repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
position: relative;

}

//删除以下类css

.collection-545e428fe4b0f79db6910e91 #siteWrapper {
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100% auto;

}

//在下面的两个部分“background-color：＃100806”中删除background-color css

siteWrapper {background-color：＃100806;}

body.transparent-header：not（.has-banner-image）#header {background-color：＃100806;}