Question

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 1024×768, it isn’t exactly working right. I’ll post some images below to show you all what I mean.

On my resolution:
https://i.stack.imgur.com/sU592.jpg

On a 1024×768 screen:
https://i.stack.imgur.com/CsiPO.jpg

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.

Answer 1

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