使用Zurb Foundation時設置網頁背景圖片？

我用下面的瀏覽器窗口的css3 code to make a background image a near perfect 100%：使用Zurb Foundation時設置網頁背景圖片？

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

不過，我也用Zurb基金會3個CSS框架，它會自動使body元素有一個白色的背景......所以上述背景圖像隱。顯然我可以重寫，但是這讓我覺得我需要像Foundation那樣以特殊的方式處理上述背景。真的嗎？或者，我還需要有這樣的：

body { 
    background: transparent !important; 
}

來源

2013-02-06 at.

編輯注：對不起，我以爲你放在那裏是Zurb代碼的重要屬性項！無論哪種方式，我會留下我的答案，它是值得的。

我對Zurb Foundation 3並不熟悉，但通常情況下，如果開發人員使用！important屬性，那是因爲他們認爲它對其餘代碼至關重要，並且不希望它被覆蓋。但是，我們正在討論一個沒有繼承的背景，因此我沒有看到body標籤上的背景屬性實際上是否「至關重要」，因爲如果將它移除，它會破壞佈局。

我在想身體的z-index，以及開發人員可能想要將某些項目放在身體後面，儘管我從來沒有見過這樣的事情，也不知道爲什麼要這樣做。此外，我認爲負Z指數應該放在身體後面，但是，我們並沒有看到這種情況發生。看到我的各種小提琴試圖隱藏身體後面的div。

http://jsfiddle.net/W9ckz/1/http://jsfiddle.net/W9ckz/2/http://jsfiddle.net/W9ckz/3/http://jsfiddle.net/W9ckz/4/

所以，除非你能想到的另一種方式，越過背景對身體可能打破布局，可以證明它是該效果的威脅（不像z-index的事我想到）然後我會說去爲它。最糟糕的情況是你必須撤消它。

I think you can remove the body background 
property altogether without side effect.

來源

2013-02-06 06:46:07 fredsbend

我會申請你html的風格，而不是body。結果將是相同的，你會重寫基金會的默認白色背景。

來源

2013-02-06 12:18:46

這實際上並不相同。有時''身體'比瀏覽器窗口的'高度'更低。 – MMachinegun

我使用Foundation 5，但不使用圖像我使用漸變，但如果您想使用圖像，則應用相同的應用程序。。。

橫幅

<div id="banner"> 
    <div class="row"> 
     <div class="small-12 columns">Some Content Here</div> 
    </div> 
</div>

的CSS - 注意寬度和Z-INDEX這將意味着背景將佔用的頁面寬度和z指數的100％，就會把它下面的任何基礎的其他元素應用此方法的最佳方式是在頁面上或在foundation.min.css之後加載的樣式表中，否則它將不會覆蓋基礎的預設。

#banner{ 
    width:100%; 
    height:100%; 
    min-height:100%; 
    z-index:-999; 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    margin:0;padding:0; 
}

來源

2014-04-27 17:50:25

使用Zurb Foundation時設置網頁背景圖片？

回答

相關問題