Question

我遇到了这个问题，试图让header-bg div始终是完整的浏览器宽度。

我有一些带有云的背景图像，当我使用ctrl + scroll时，图像保持原始宽度并保持左对齐。在原始页面视图中，bg是完美的100％宽度，但我希望它与al屏幕宽度完美。这甚至可能还是我错了？

下面是代码：

body, html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;} 


#header-bg {
    background-image:url(images/header/header-bg.jpg);
    background-repeat:no-repeat;
    min-width:100%;
    width:100%;
    margin:0;
    position:fixed;
    height:402px;}

<div id="header-bg">
<div id="header">
<div id="navigation">
</div>
</div>
</div>

感谢您的期待！

Answer 1

默认情况下，背景图片无法调整大小。必须使用background-size属性来获取填充整个DIV的背景：

#header-bg {
     background-image: url(images/header/header-bg.jpg);  

    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    /*Other CSS*/
}

此CSS功能受以下支持：

Firefox 3.6 +
Opera 9.5 +
Chrome 1 +
Safari 3 +
Internet Explorer 9 +

如果您无法使用此属性，则唯一剩下的选项是使用<img>元素。
小提琴：http://jsfiddle.net/Hf79s/

<style>
#header-bg{
    width:100%;
    height: 50px;
}
#header-bg-img {
    height: 100%;
    width: 100%;
}
</style>
<div id="header-bg">
    <img src="images/header/header-bg.jpg" id="header-bg-img" />
</div>

Answer 2

你可以让背景图像格外宽，所以它也会填满大屏幕。唯一的缺点是较小的屏幕不会看到整个图像，但当它只是装饰性云时，应该没问题。

另一种解决方案是背景大小。但是这样做的缺点是背景将不成比例地缩放，或者图像的底部被剪裁。旧的IE版本也不支持它。

Header-bg div 100％真的不是100％

2 个答案: