如何以不填满页面的 div 的全尺寸设置背景图像

Question

我需要在 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; }