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

Answer 1

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" );
}