Question

我有一个背景图片，我想在顶部标题后显示。此图像应位于页面的其余部分。在后期我甚至可以有一个页脚，图像应该占据页眉和页脚之间的整个空白区域。我想把这个背景图像放在空的空间里，这样在图像的顶部，我可以得到显示内容等的div。当我只是将图像放在body背景中时，我成功地实现了这一点，但是，现在我希望顶部标题结束后的背景图像。

示例：http://jsbin.com/opokev/2

CSS：

.backgroundimage {
 background: url(http://s1.postimage.org/ur0h52mvy/Sketch2.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;


}
div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 500;
}

HTML

<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
  <div id="masthead"></div>
  <div class="backgroundimage"></div>
</body>

Answer 1

您可以将图像设置为正文的背景图像，并为标题添加偏移量，如下所示：

body {
    background-image: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg');
    background-position: 0px 85px;
    background-repeat: no-repeat;
}
div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    width: 100%;
    margin: 0;
}

Answer 2

 body { background: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg') no-repeat; background-position: 0px 85px; }

将背景图像放在div中

2 个答案: