帶CSS的重複圖像標題和整頁背景圖像[包含代碼]

我的網頁使用整頁拉伸背景圖像。我的問題是，背景圖像似乎覆蓋了我試圖添加重複背景圖像的形式（所以我可以使用CSS不透明度）的前10px橫幅/標題。以下是整個頁面：帶CSS的重複圖像標題和整頁背景圖像[包含代碼]

<html><head> 
<style type="text/css" media=screen> 

body{ 
    margin: 0px; 
    color: #000; 
    font-family: helvetica, times; 
    font-size: 14px; 
} 

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 

    /* Preserve aspet ratio */ 
    min-width: 100%; 
    min-height: 100%; 
} 

#banner{ 
    background: url('images/banner2.gif'); 
    background-repeat: repeat-x; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding:50px; 
    text-align: center; 
} 

</style></head> 

<body> 

<img src="images/background.jpg" id="bg"> 

<div id="banner"> 
Banner Test Text 
</div> 

</body> 
</html>

我已經嘗試添加z-index但沒有解決方案。對於我做錯的任何輸入都非常感激。請注意，整頁背景圖像的這種實現是我用圖像獲得的最佳效果，所以如果解決方案能夠適應這種情況，它會很棒。

來源

2013-03-10 user1640722

啊，設法得到它自己。對於任何未來的讀者，我需要做的只是添加

position:absolute;

到#banner代碼。

來源

2013-03-10 05:50:42 user1640722

嘗試'position：relative;'（參見[fiddle]（http://jsfiddle.net/TqsYX/））。 – thirdender 2013-03-10 05:55:52

帶CSS的重複圖像標題和整頁背景圖像[包含代碼]

回答

相關問題