我正在尝试创建一个具有 background-size:100% 100% css 规则的网站。它是位于内容后面的图像，其设计方式无论浏览器窗口的尺寸如何，它仍然可以正常工作。
我认为我的规则(如下所示)与蓝图有某种冲突。
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
这应该会生成一个完美的 100% 背景图像，但是，我得到的结果是背景在内容结束的地方结束，无论浏览器窗口大小如何。
这是我想要的和我得到的两张图片:
预期
我得到了什么(无论浏览器大小)
请帮助我，我不确定如何进行。
这是我的页面 HTML 设置:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current"><a href="index.php">Home</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
如果容器高 550 像素，则背景在页面下方 550 像素处结束，该区域下方有一个空白区域。
我能够在 JSFiddle 上复制效果:
最佳答案
如果您能以这种方式向我们展示您的 HTML 和 CSS，那就太好了，也许我可以指出您做错了什么。
你可以写。
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
关于blueprint-css - Blueprint 是否会阻止 CSS 中图像的 100% 背景大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6048230/