如何设置不填充页面的div的完整大小的背景图像

Question

我需要在div的中心位置放置一个div背景图像，如：

我尝试的是：

<div id="container">
    ...
</div
<div id="background">
    <img src="images/bg.png"/>
</div>

用这个css：

div#container {
    margin: 0 auto;
    width: 52em;
}
div#bg img {
    z-index: -999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 22%;
}

在我的浏览器中，使用我的屏幕尺寸，我放22％并且一切正常，但如果我尝试不同大小的另一个屏幕，背景img不在div的中心。我能做什么？有人可以帮我吗？

Answer 1

给

position:relative;

在容器div ..它应该工作.. 并且背景div（带position:absolute;）应该是容器div的子项。然后只有你会得到div重叠属性

Answer 2

可以使用如下css：

#sample
{
    background:url(bg_apple_little.gif) no-repeat center center;
    height:200px;
    width:200px;
}

＆安培;你div将与id =“sample”。 高度，宽度可根据您的要求变化。

Answer 3

在css3中，您可以使用#container { background-size: auto; }