Question

我的网页使用整页拉伸背景图片。我的问题是背景图像似乎覆盖了我试图以重复背景图像的形式添加的前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但没有解决方法。对我所做错的任何输入都非常感激。请注意，整页背景图像的这种实现是我用我的图像实现的最好的，所以如果有一个解决方案可以很好地适应它。

Answer 1

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

position:absolute;

到#banner代码。

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

1 个答案: