html - Header-BG div 100％不是100％

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

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

这是代码：

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>

感谢您的光临！

最佳答案

默认情况下，背景图像无法调整大小。 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+
铬1+
Safari 3+
Internet Explorer 9+


如果不能使用此属性，则唯一剩下的选项是使用<img>元素。

<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>

关于html - Header-BG div 100％不是100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7797279/