HTML和BODY不同的背景

我想漸變所有的HTML文檔，並在BODY標籤的中心我需要另一個背景爲中心。HTML和BODY不同的背景

編輯，看看它有多少失敗嘗試一下：

此圖片解釋它：

enter image description here

如果我把在CSS它失敗了，只有1個背景甚至顯示，如果下面應顯示repeat-y背景：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
html { 
    background-color: #ffeacd; 
    background-image: url(bg.png); 
    background-repeat: repeat-x; 
} 
body { 
    background-image: url(bg_overlay.png); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
.content { 
    width:1020px; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
</style> 
</head> 
<body> 
<div class="content"> 
    <p>This content is closed in 1020px wide DIV, as to merge in most displays. </p> 
    <p>Rest around is an background seen or unseen depends on users screen size. </p> 
    <p>Me got 24'' so its obvious that I will see all backgrounds and even gradients as 
    blank space fillers</p> 
    <p> 
    <h1>See how much it fails in various browsers:</h1> 
    <ul> 
    <li><a href="chrome.png">Chrome</a></li> 
    <li><a href="ff.png">Firefox</a></li> 
    <li><a href="ie.png">IE</a></li> 
    </ul> 
    </p> 
)</div> 
</body> 
</html>

來源

2012-05-07 Szymon Toda

需要看你的實際代碼。 – BoltClock

提供了現場示例的代碼，現在你可以看到它失敗了多少 –

我想這應該可以幫助您：

html { 
      background: #ffeacd url(bg.png) 0 0 repeat-x; 
      width:100%; 
      height:100%; 
    } 
body { 
      background:transparent url(bg_overlay.png) center center no-repeat; 
      width:100%; 
      height:100%; 
    } 
.content { 
      width:1020px; 
      padding: 0px; 
      margin-top: 0px; 
      margin-right: auto; 
      margin-bottom: 0px; 
      margin-left: auto; 
     }

來源

2012-05-07 11:26:12

它做到了！ 2/3完成，現在爲什麼IE不使用背景透明PNG這裏：http://xn--wiadomesny-37b.pl/bg？ –

和它一起玩的很少，IE瀏覽器根本不顯示HTML圖形 - 只是顏色的身體（沒有img）！ –

你應該嘗試這樣做，

body{ 
    background-position: fixed; 
}

來源

2012-05-07 10:13:13 bunsiChi

你應該用兩個div，一個是左側邊欄，一個是主要內容。將BODY的背景設置爲漸變，將左側的DIV設置爲您想要的背景。

然後你只需要專注於爲div創建雙列布局。 This是CSS定位的絕佳入門書。

來源

2012-05-07 10:14:56

但它會調整我的寬度方式和用戶比將被迫使用水平滾動條。 –

不是如果你的風格是正確的與CSS .. –

羅布 - 你能提供一個例子嗎？ :) –

如果你沒有看到兩個背景，也許這是因爲你的body元素佔據與html相同的區域。

下面演示的元素可以有不同的背景（http://jsfiddle.net/ZVHqs/）：

<!doctype html> 
<style> 
html { background: green; } 
body { background: yellow; margin: 1em; } 
</style> 
Hello world

來源

2012-05-07 10:21:15

看到現場的例子，其並非如此：http://xn--wiadomesny-37b.pl/bg –

HTML和BODY不同的背景

回答

相關問題