Background image cut off beyond viewport

Question

Url for the unruly site: http://chrism.se

After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.

The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?

Full view = i.imgur.com/6aDpN.jpg

Problem = i.imgur.com/X6JVp.jpg

Solution 1

The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:

• Remove right: 0.
• Add min-width: 1349px.

Looking again, maybe that's good enough.

Tested in Firefox only, using Firebug.

Solution 2

IE does not support min-width so you can use an expression to do the same:

body {
    /* fix for most browsers, fill in desired width */
    min-width: 1000;

    /* IE Version, fill in desired width equal to the min-width, second value with 2px less */
    width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}

Solution 3

I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.

It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).

Comments

[Nasir]

there is a image in the background of another DIV that is too short in height

[Cederfjard]

Thank you for your input. This isn't ideal for me, since it isn't supposed to be static. Doesn't take care of the gap below the footer either.

[Cederfjard]

That certainly seems to do the trick! Cheers, thanks for your help