看我实例
<body>
<img src="background.jpg" id="background-full" />
<div id="main">
... 你的 HTML 内容 ...
</div>
</body>
---
html, body {
height: 100%
width: 100%
padding: 0
margin: 0
}
#background {
z-index: -999
// z-index 是为了把 IMG 推到网页最後层
min-height: 100%
min-width: 1440px
background-position: center
background-size: cover
// background-size 是 CSS3 新特性，cover 就是占用全屏，你也可以改用 background-size: contain 占用全屏的比例高
width: 100%
height: auto
position: fixed
top: 0
left: 0
}
#main {
position: relative
width: 800px
min-height: 400px
margin: 100px auto
}
// #main 是我随便乱写的
应该可以做 LZ 你想要效果，不行的话把 Background 图片嵌进 CSS 当作 background-image 然後用 blank.png (全透明图) 取代本来的 IMG
如果你有一张比较绚烂的图片想做背景，可以这样设置：代码如下：
body{
background:url(img.jpg)
background-position:center
background-repeat:no-repeat
}
但效果很可能会是这样：
图片没有重叠，居中，并且...她太小了，无法占领全部的页面。
很可惜，CSS2中并没有图片全屏拉伸的属性，所以我自己想了个办法。
利用一个DIV层，在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%，并固定到屏幕最底层，这样就实现了完美的拉伸并最大化图片的目的。
首先在Body中加入下面的代码：
代码如下：
<div
id="div1"><img
src="img.jpg"
/></div>
然后加入CSS代码：
div#div1{
position:fixed
top:0
left:0
bottom:0
right:0
z-index:-1
}
div#div1
>
img
{
height:100%
width:100%
border:0
}
最终效果：
拉伸浏览器、调整网页位置后，图片背景图片依然居中全屏：
火狐狸中的效果：
这样，我们实现了固定居中且自动拉伸全屏的背景图片，不过她是一个层，所以当用户在页面空白处右键的时候，显示的就是图片的信息，这可能会让用户感觉不方便。
实际上，火狐的拉伸效果比IE强很多，会自动羽化图片的细节。IE在图像拉伸后的像素点非常难看，所以建议用高分辨的图像作为背景。
新手向，高人请指导，谢谢。
不要用定位去居中：body{text-align:center}/*IE下让内容居中*/
.wp{
width: 980px
margin: 0 auto/*FF、CH、SF、OP下让区块居中*/
text-align: left/*继承了body的text-aling: center，这个区块中的内容和文本也会居中，重新设置为left对齐方式覆盖回来*/
}
<div class="wp">居中的div，其他内容都放在里面</div>
