css - 如何以不填满页面的 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(with 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; }