Resizable background image based on browser size?

[mboehler3]

I'm trying to accomplish what's done on this page here: http://www.hotchocolatechicago.com/, without using Flash.If you shrink your browser, and then slowly expand it, you'll see the chocolate milkshake in the background resizes with the browser size. It does not become pixelated when you stretch it out, it appears that is always maintains its resolution.I would guess that the image is a rather large image, and is displayed at ~30% of its size when the browser is shrunk, then expands with the browser. Not sure how to go about coding this though.Thanks for any help you can provide!

[ste]

There is a background-size property in CSS3 but it is not supported in IE. Example:

html {		background: url(images/bg.jpg) no-repeat center center fixed;		background-size: cover;}

Here's another method that should work in all browsers, suggested by Ingolme the last time this question came up. Use an ordinary image and use z-index to place content on top. Example:

<img src="images/bg.jpg" id="bg">#bg {		position:fixed;		top:0;		left:0; 		min-width:100%;		min-height:100%;}

It could also be done with Javascipt