頂部填充重複的css背景

如何添加頂部填充/空間的重複css背景。頂部填充重複的css背景

這是我的HTML結構。

<div class="flare"> 
    <div class="clouds"> 
    <div class="clouds_bottom"> 

     <div class="header"> 
      contents 
     </div> 

     <div class="content_body_wrapper"> 
      contents 
     </div> 

     <div class="footer"> 
      contents 
     </div> 

    </div> 
    </div> 
</div>

和我的css代碼不起作用。

.clouds_bottom { 
    background: url('../img/clouds_bottom_bg.png') repeat left 250px; 
}

來源

2012-04-19 Prakash

頂部空間一次或每行？ – 2012-04-19 20:50:47

我只需要250px的空間而沒有任何背景，但我並不是指身體上的頂部填充。 – Prakash 2012-04-19 20:52:38

這是依賴於你的網站結構你能發佈正在使用的類的html嗎？ – 2012-04-19 20:54:49

使用CSS可以欺騙。而不是將背景100％從頂部覆蓋它與另一個具有原始背景[顏色]的div。

HTML：

<html> 
<body> 
    <div id="cheated_background"> 
    </div> 
    <div id="body"> 
     content 
    </div> 
</body> 
<html>

CSS：

body { 
    background: lightblue; /* your clouds :) */ 
} 
#cheated_background { 
    position: absolute; 
    top: 0px; 
    background: white; 
    width: 100%; 
    height: 100px; 
} 
#body { 
    position: relative; 
}

退房live example。

來源

2012-04-19 22:19:06 seler

嘗試使用repeat-x代替repeat？如果垂直重複，則無法看到由背景位置創建的邊距。

編輯來評論：如果你需要在兩個方向重複，我能想到的是一個三層結構。你需要一個容器分區position:relative，你可以把三個div分配給position:absolute。底部會有重複的背景圖片，中間的會是白色的，只覆蓋底部的頂部，頂部會包含您的實際內容。

來源

2012-04-19 21:05:55 Armatus

問題是我需要在x和y兩個位置上重複背景。 – Prakash 2012-04-19 21:08:52

頂部填充重複的css背景

回答

相關問題