带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但没有解决方案。对于我做错的任何输入都非常感激。请注意，整页背景图像的这种实现是我用图像获得的最佳效果，所以如果解决方案能够适应这种情况，它会很棒。

答

啊，设法得到它自己。对于任何未来的读者，我需要做的只是添加

position:absolute;

到#banner代码。

尝试'position：relative;'（参见[fiddle]（http://jsfiddle.net/TqsYX/））。 – thirdender 2013-03-10 05:55:52

带CSS的重复图像标题和整页背景图像[包含代码]

相关推荐