藍圖防止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/

來源

2011-05-18 Dan Hanly

如果你能向我們展示你的HTML和CSS，那麼我可以指出你做錯了什麼，這會很好。

您可以編寫。

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

來源

2011-05-18 20:59:03 breezy

能夠在JSFiddle中複製效果，請參閱我的帖子以獲取鏈接。 – 2011-05-19 08:19:27

最終，它是在與藍圖打包的復位CSS''HTML {height：100％}'丟失了。我加了這個。乾杯！ – 2011-05-19 08:34:03

那麼這是答案嗎？ – breezy 2011-05-19 10:47:28

添加最小高度的主體，其是等於背景圖像的高度將確保體足夠大顯示整個背景。

來源

2011-05-18 17:21:16 Jrod

能夠在JSFiddle中複製效果，請參閱我的文章鏈接。 – 2011-05-19 08:20:00

藍圖防止CSS中的圖像100％背景大小？

回答

相關問題