开发者

placing background image in a div

开发者 https://www.devze.com 2023-03-28 22:30 出处:网络
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 empt

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; }
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号