placing background image in a div
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>
You can set your image as the body's background-image, with an offset for the header, like this:
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;
}
body { background: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg') no-repeat; background-position: 0px 85px; }
加载中,请稍侯......
精彩评论