Wrap background-image to size of browser window

basically I have a little problem with a background I am using. I need it to resize based on what width the window is, because I work with a massive screen and it displays fine, however on 1024x768, it isn't exactly working rig开发者_JS百科ht. I'll post some images below to show you all what I mean.

On my resolution: http://imgur.com/Pl87L

On a 1024x768 screen: http://imgur.com/l6CUe

Also, here is the CSS for my background:

html, body {
width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(/../images/background10.jpg) fixed no-repeat;
    }

I hope this helps :).

Ross.

There may be a better way, but I've used jquery before to change (onLoad) the background src based on browser width, something along the lines of ...

function browserSize() {
    var bsr_w = $(window).width();
    if (bsr_w <= 800) {
        $('body').css("background-image", "url(background_small.jpg)");
    } else if (bsr_w <= 1024) {
        $('body').css("background-image", "url(background_medium.jpg)");
    } else {
        $('body').css("background-image", "url(background_large.jpg)");
    }
}

In you could use the background-size property. Not full support yet but its nice - csspie might also help out on that (think its does as I kind of remember trying this a couple of months back)

There's a pretty useful jQuery plugin that handles this fairly gracefully for you: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

It might be a bit like using a sledgehammer to crack a hazelnut, but it might do what you need.