如何设置一个div的全尺寸的背景图像，不填充页面

我需要把图像在一个div的背景下，在它的中心位置，如： Example 如何设置一个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％，一切都OK，但如果我尝试用不同大小的另一个屏幕上backgrou nd img不在div的中心。我能做什么？有人能帮我吗？

来源

2012-07-07 JackTurky

给

position:relative;

容器div..It

应该工作.. 和背景的div（与position:absolute;）应容器div..then的孩子只拿到日子会把你在div重叠物业

在CSS3

来源

2012-07-07 07:38:15

可以使用CSS如下：

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

&你的div将使用id = “样本”。高度，宽度可根据您的要求而变化。

来源

2012-07-07 07:34:44

http://stackoverflow.com/questions/4280886/css-background-image-larger-than-div-itself，你可以在这里看到，一个背景图片不能溢出一个div – JackTurky 2012-07-07 07:39:09

，但它无线ld只填充自己的区域为居中。 – 2012-07-07 09:17:05

可以使用#container { background-size: auto; }

来源

2012-07-07 08:06:47

如何设置一个div的全尺寸的背景图像，不填充页面

回答

相关问题