Html 如何将子div放置在父div的背景图片上？

我一直试图在父div上显示子div，但它一直在向下推。我想要一个背景图片，上面有一个横幅，横幅内有一些文字

<div class="contact-wrapper">
  <div class="contact-background"></div>
    <div class="contact-header">
      <h1>Contact Us</h1>
    </div>
</div>


    .contact-wrapper{
 width: auto;
 height: 400px;
 border: 3px solid #ff0000;
 margin-top: 5px;
}

.contact-background{
 background-image: url("images/background1.jpg");
 width: auto;
 height: 400px;
 object-fit: contain;
 vertical-align: top;
 opacity: 0.7;
 position: relative;


.contact-header{
 width: auto;
 height: 70px;
 background-color: #c1c1c1;
 line-height: 70px;

}

联系我们
.接触包装{
宽度：自动；
高度：400px；
边框：3倍实心#ff0000；
边缘顶部：5px；
}
.联系背景{
背景图片：url（“images/background1.jpg”）；
宽度：自动；
高度：400px；
对象匹配：包含；
垂直对齐：顶部；
不透明度：0.7；
位置：相对位置；
.联系人标题{
宽度：自动；
高度：70像素；
背景色：#C1C1；
线高：70px；
}

尝试添加

position: absolute; top:0;

到

。联系人标题

类

。联系包装器{
宽度：自动；
高度：400px；
边框：3倍实心#ff0000；
边缘顶部：5px；
}
.联系背景{
背景图像：url（“http://via.placeholder.com/350x350");
宽度：自动；
高度：400px；
对象匹配：包含；
垂直对齐：顶部；
不透明度：0.7；
位置：相对位置；
z指数：1；
}
.联系人标题{
宽度：100%；
高度：70像素；
背景色：#C1C1；
位置：绝对位置；
排名：0；
z指数：2；
}

联系我们

hi，is所做的是：标题的宽度与“contact us”文本的宽度一样大。位置保持不变。它仍然在背景图像下。我将“width:auto；”替换为“width:100%”；在“contact header”classI编辑为代码中，尝试在“contact background”和“z-index:2”上添加“z-index:1；”关于contact Headeran为什么必须为背景设置一个额外的div？您不能用CSS为容器div设置背景吗？