Keeping a CSS background image the same regardless of user resolution

I have a very large image I want to use as a CSS background. However, I want it to look the same regardless of which resolution the user's monitor is at. The last time I tried this, 开发者_StackOverflow社区it would cut off at different resolutions.

Any way to do this sort of dynamic resizing in CSS only? Or should I resize it to the most common resolution and hope for the best?

I did this just recently. Try Fullscreenr jQuery plugin, it's great.

http://ajaxmint.com/2009/12/fullscreenr-lightweight-full-screen-background-plugin/

* { margin : 0; padding : 0; }

html, body { height:100%; color : #FFF;}

div#bgcontext { position : absolute; width : 100%; height : 100%; overflow : hidden; }

div#background { position : fixed; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

div#background img { min-height: 100%; min-width : 1600px; max-width : 100%; margin-right : -100%;}

Here's the markup...

<div id="bgcontext">

<div id="background"><img src="assets/bg.jpg" /></div>

</div>

</body>

This will create a stretchable, fixed, centered background image... you can tailor the min-width and min-height to your liking.