蓝图防止CSS中的图像100％背景大小？

问题描述：

我正在尝试创建一个带有background-size:100% 100% css规则的网站。这是一个位于内容背后的图像，其设计方式无论浏览器窗口的尺寸如何，都能够很好地工作。蓝图防止CSS中的图像100％背景大小？

我认为我的规则（如下）与Blueprint以某种方式发生冲突。

body { 
    background:url('../img/bg.jpg') no-repeat; 
    background-size:100% 100%; 
    -moz-background-size:100% 100%; 
    -webkit-background-size:100% 100%; 
}

这应该产生一个完美的100％的背景图像，但是，我得到的结果是，后台完成，其中的内容完成，不管浏览器窗口大小。

这里有我想要的两幅图像，什么我越来越：

预期 expected background display

什么，我抵达（无论浏览器的大小） display I'm getting

请帮助我，我不知道如何继续。

这里是我的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>

如果容器是550px高，那么后台结束550px下来与区域下方空的空白页。

我能够复制上的jsfiddle效果：

http://jsfiddle.net/danhanly/TurW5/4/

答

如果你能向我们展示你的HTML和CSS，那么我可以指出你做错了什么，这会很好。

您可以编写。

html {height:100%} 
body {background:url('/image.jpg') no-repeat center} 
#container { 
    margin:20px auto; 
    width:960px; 
    overflow:hidden}

能够在JSFiddle中复制效果，请参阅我的帖子以获取链接。 – 2011-05-19 08:19:27

最终，它是在与蓝图打包的复位CSS''HTML {height：100％}'丢失了。我加了这个。干杯！ – 2011-05-19 08:34:03

那么这是答案吗？ – breezy 2011-05-19 10:47:28

答

添加最小高度的主体，其是等于背景图像的高度将确保体足够大显示整个背景。

能够在JSFiddle中复制效果，请参阅我的文章链接。 – 2011-05-19 08:20:00

蓝图防止CSS中的图像100％背景大小？

相关推荐