CODEWITHSUNDEEP
htmlcss
RossDoughty
RossDoughty

Reputation: 73

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 right. I'll post some images below to show you all what I mean.

On my resolution: https://i.sstatic.net/sU592.jpg

On a 1024x768 screen: https://i.sstatic.net/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.

Upvotes: 0

Views: 1704

Answers (3)

Les
Les

Reputation: 1425

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.

Upvotes: 0

Ian Wood
Ian Wood

Reputation: 6573

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)

Upvotes: 0

designosis
designosis

Reputation: 5263

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

Upvotes: 1

Related Questions