Blueprint 是否会阻止 CSS 中图像的 100% 背景大小？
我正在尝试创建一个具有 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 上复制效果：
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<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>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您能向我们展示您的 HTML 和 CSS，那就太好了，这样也许我可以指出您做错了什么。
你可以写。
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
向主体添加等于背景图像高度的最小高度将确保主体足够大以显示整个背景。
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.