views:

62

answers:

5

Ok, so I'm trying to build a website in which a large picture is the background. I want to be able to load a different size picture based on the user's window size so they (hopefully) don't see any blank space. I want to use JavaScript to measure the size of the current screen. Then, based on the size of the window, I would like to load in an image that corresponds to that resolution.

However, when looking online, I could not find a standard way to get the window size in all browsers. Any help is very appreciated! Also, if you have another idea of how to implement this, let me know!

+1  A: 

Prototype: document.viewport

JQuery: window

Pekka
+2  A: 

jQuery, YUI, and other JavaScript frameworks have solved this problem. Take a look at their solutions, even if you don't want to plug in a full framework.

philfreo
+1  A: 

Use jQuery

var height = $(window).height();
var width = $(window).width();

That will work in all major browsers.

code_burgar
Thanks! I'll look into that.
John
@John Have a look at J-P's answer, I think it is what you are looking for.
Josh Stodola
+1  A: 

There is a solution written at this link Here

I have tested it on ff, seems ok.

erdemoo
+3  A: 

A user's window is unlikely to vary hugely in size during use. It's best to only provide one image, and then scale it depending on the size. This can be achieved through CSS alone.

img#my-big-background-image { 
    width: 100%;
}
J-P
+1 Good call, this is clearly a better solution than having a bunch of separate images. Spolsky does this on the header of his site.
Josh Stodola