Home/ Questions/Q 6322619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T16:22:02+00:00

I have a background image that I want to show after the top header.

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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