将背景图像放置在div中
我想在顶部标题之后显示一个背景图像。该图像应位于页面的其余部分。在后期，我什至可以有一个页脚，并且图像应该占据页眉和页脚之间的整个空白空间。我试图将这个背景图像放在空白的空间中，以便在图像顶部我可以让我的 div 显示内容等。 当我简单地将图像放在 body 背景中时，我成功地实现了这一点，但是，现在我想要在顶部标题结束之后的背景图像。
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>
I have a background image that I want to show after the top header. This image should be on the remaining of the page. At later stage I can even have a footer and the image should take up the whole empty space between the header and the footer. I am trying to have this background image in the empty space so that on top of the image I can have my div's that show content etc.
I was successful in achieving this when I simply put the image in the body background, however, now I want the background image AFTER the top header ended.
Example: 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以将图像设置为正文的背景图像，并带有标题的偏移量，如下所示：
You can set your image as the body's background-image, with an offset for the header, like this: