无论用户分辨率如何，都保持CSS背景图像相同

Question

我想要用作CSS背景的非常大的图像。但是，无论用户的显示器处于哪种分辨率，我都希望它看起来一样。我最后一次尝试这个，它会在不同的分辨率下切断。

任何方式只在CSS中进行这种动态调整大小？或者我应该将其调整为最常见的分辨率并希望最好？

Answer 1

我最近这样做了。试试Fullscreenr jQuery插件，它很棒。

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

Answer 2

* { 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%;}

这是标记...

<div id="bgcontext">

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

</div>

</body>

这将创建一个可伸缩，固定，居中的背景图像......您可以根据自己的喜好定制min-width和min-height。