CSS: background image does not fill when scrolling

working on a very small site which loads in one go, so there is a div which holds all the background images, and on top of that (i.e. higher z-index) there is a content div which holds everything. I can switch backgrounds easily based on what content is selected.

Unfortunately, I noticed if you launch in a small window so that scrollbars appear, if you scroll there is no background image in the 'revealed' portions of the page. :-(

Page structure:

<body>
<div id="bg">
    <div class="bgone"></div>
    <div class="bgtwo"></div>
</div>

<div id="container">
<!-- content panels here -->
</div>
</body>

css:

#bg
{
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: 1024px;
    z-index:1;
}
.bgone
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/one.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:2;
}
.bgtwo
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/two.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:3;
}
#container
{
    position:relative;
    width:900px;
    padding:0px;
    margin:0px auto;
    height:600px;
    z-index:10;
}

I had the same problem and it is annoying. Problem for me was that I could not change the HTML, only the CSS, so I couldn'y remove the additional divs.

The problem as I see it is that the backgrounds have "width: 100%" and the container has "width: 900px". So, for example, if the browser window is 800px wide, the backgrounds are set to 800px and, therefore, when you scroll the window horizontally, you get the areas without the background.

Another way to fix the problem is to remove the "width: 100%" from the backgrounds and replace it with a "min-width: 900px", thus forcing the backgrounds to be always at least the same width as the container. When the window size becomes less than 900px, the backgrounds always remain at the same with as the container. Works a treat.

I had the same problem. this fixed by overflow-x: scroll;

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;

The answer is here:

http://bytes.com/topic/html-css/answers/577902-background-image-getting-cut-off-outside-original-window-display

In short, I was making things overly complicated. Solution was to:

get rid of the divs that hold bg images - you'd have to set dimensions to 100% just to see the bg img, but that would only be 100% of the viewable area / viewport, which isn't recalculated when you scroll.
apply any bg images directly to the body element because its dimensions aren't restricted to the initial size of the viewport

and in my case (using multiple bg images):

create separate css styles for each bg image, then
use jquery to apply them to the body - eg $(body).addClass("specialbg"); etc

I'd add to Steg's suggestion to "remove the 'width: 100%' from the backgrounds and replace it with a 'min-width: 900px'," by saying that you should not remove width: 100%, but simply add a min-width. Otherwise, if the width is larger than the min-width, some browsers may not repeat it beyond the min-width.

I had this issue and fixed with:

html {
    background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
    color: white;
    background: transparent;
}

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      </ul>
    </body>
  </html>

Using background-repeat:repeat-x will only give you one row of the background image repeated along the top. If you remove that CSS property altogether, it will tile the background image both horizontally and vertically, which it sounds like is what you want. Unless your background images are 1024px high, they won't fill the containing div.

In my case the solution was to set fixed height and/or width to the div in question.

Just a note, If you have height set on the parent/element, It might also break the image.

For example, most people use this in their code

body {
   height: 100%; //avoid it
}

来源：https://stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling

标签

css

scroll

background-image