Html 如何使图像和顶部标题占据页面宽度的100%？

我有以下代码：

 HTML: 

 <header class="top">
 <h1>CHCF</h1>
 </header>
 <div class="img">
 <img src="/chcf/backdrop.jpg" class="backdrop">
 </div>
 <div class="lower">
 <h1>Hello</h1>
 </div>

 CSS: 

 body {
 }
 h1 {
 color: #FFFFFF;
 text-align: center;
 }
 .top {
 background-color: #000000;
 left: 0px;
 position: absolute;
 top: 0px;
 width: 100%;
 }
 .backdrop {
 left: 0px;
 margin-top: 77px;
 position: relative;
 width: 100%;
 }
 .lower {
 background-color: #FFFFFF;
 color: #000000;
 margin-top: -300px;
 opacity: 0.7;
 overflow: hidden;
 position: absolute;
 width: 100%;
 }

HTML：
CHCF
你好
CSS:
身体{
}
h1{
颜色：#FFFFFF；
文本对齐：居中；
}
.顶{
背景色：#000000；
左：0px；
位置：绝对位置；
顶部：0px；
宽度：100%；
}
.背景{
左：0px；
边缘顶部：77px；
位置：相对位置；
宽度：100%；
}
.下{
背景色：#FFFFFF；
颜色：#000000；
利润上限：-300px；
不透明度：0.7；
溢出：隐藏；
位置：绝对位置；
宽度：100%；
}

---

使用下面的代码，我能够实现我的愿望，那就是在图像顶部显示文本。但是，通过使用position:relative in.background，图像和顶部标题不会占据页面宽度的100%。我怎样才能解决这个问题

根据我从您的代码中收集的信息，我认为这会有所帮助。顶部、背景和下部都是100%，现在。背景可以是相对的

 body{
    padding:0px;
    margin:0px;
 }
 .background{
    position:absolute;
    width:100%;
 }
 .backdrop{
    width:100%;
 }
 .forground{
    z-index:3;
    position:absolute;
    width:100%;
 }
 .headerstuff{
    background-color:#ffffff;
 }
.top{
    width:100%;
}


 <div class="background">
 <img src="winter.jpg" class="backdrop">
 </div>

 <div class="forground">
     <header class="headerstuff top">
     <h1>CHCF</h1>
     </header>


     <div class="headerstuff lower">
     <h1>Hello</h1>
 </div>
 </div>

正文{
填充：0px；
边际：0px；
}
.背景{
位置：绝对位置；
宽度：100%；
}
.背景{
宽度：100%；
}
.放弃{
z指数：3；
位置：绝对位置；
宽度：100%；
}
.海德斯塔夫酒店{
背景色：#ffffff；
}
.顶{
宽度：100%；
}
CHCF
你好