body width 100% of page not screen

Question

I have a background image in the body of my page set to bottom right. But when the content within the page stretches beyond the screen the background image stops at the edge of the screen instead of where the actual content ends.

Here's the relevant css:

html, body {
    margin : 0;
    padding : 0;
    font-family : arial, sans-serif;
    background-color : #15242d;
    height: 100%;height:auto;
    min-width: 100%;width:auto;
    font-size: 15px;
    color: #959595;
}

body {
    background-image : url(images/body_bkg.gif);
    background-repeat: no-repeat; 
    background-position:right bottom;
}

Whats the best way to get around this issue?

Answer 1

If you don't already have one, you need to wrap the content of your website in a containing div which will expand to the size of the content. Then you need to apply the background image to that div , instead of putting it on the body .