28

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;
}
rekindleMyLoveOf
  • 375
  • 1
  • 4
  • 13
  • What do you want to have happen when you scroll? Should the background images move with the scrolling, or should it repeat? – Richard JP Le Guen Jan 18 '10 at 04:17
  • Hi - I don't want the img to scroll at all. It is just that when the window is not maximized, and you scroll to the right to see more content, the bg image has not been painted in: the new content that scrolls into view has a white background/no background image. The image fades to white vertically (at the bottom) but is a solid color at the top. So it needs to keep tiling horizontally, but doesn't when you scroll. – rekindleMyLoveOf Jan 18 '10 at 04:40

10 Answers10

28

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.

Steg
  • 10,000
  • 3
  • 24
  • 17
  • This is a perfect description of the problem. You're the man! – ptrin Dec 03 '10 at 20:09
  • min-width is clutch. You can fix the general background problem by assigning the image to the html tag, instead of some other div, but for things that aren't background but still need to scale properly, the min-width property works great. – dlitwak Jun 11 '12 at 01:57
11

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;
ali bagheri
  • 139
  • 2
  • 5
5

The answer is here:

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

  1. 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.
  2. 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):

  1. create separate css styles for each bg image, then

  2. use jquery to apply them to the body - eg $(body).addClass("specialbg"); etc

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
rekindleMyLoveOf
  • 375
  • 1
  • 4
  • 13
3

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.

neil1967
  • 257
  • 3
  • 16
3

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>
Post Impatica
  • 14,999
  • 9
  • 67
  • 78
2

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.

carillonator
  • 4,715
  • 3
  • 29
  • 39
  • hi, actually I do just want it repeated as one row along the top (I don't want it tiled). The bg image vertically shades to white so vertical scrolling isn't too much of a problem. It's horizontal scrolling that is the real issue... – rekindleMyLoveOf Jan 18 '10 at 04:35
  • aha. Try setting the width of #bg to 900px to match #container – carillonator Jan 18 '10 at 05:21
2

using background-attachment: fixed; the background-image that will not scroll with the page. so only the content is scrolled.

       body {

        background-image: url("image.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }
Vishali Sakar
  • 71
  • 1
  • 3
2

By simply adding "background-attachment: fixed;" worked for me!

Akanksha
  • 121
  • 1
  • 2
2

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

amypellegrini
  • 1,026
  • 9
  • 13
1

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
}
Sibiraj
  • 4,486
  • 7
  • 33
  • 57