[最终答案]
由于我的第一个答案中的绝对定位揭示了董事会效应（以下元素的重叠），这种方法当然更好：

#content {
  width: 100%;
}

#overlay {
  background: url(https://picsum.photos/800);
  background-repeat: no-repeat;
  background-size: fill;
  background-position: center;
}

<div id="before">
  some div
</div>
<div id="content">
  <div id="overlay">
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
  </div>
</div>
<div id="after">
  other div
</div>

[第一个答案]
代码中的phase1box是容器。相反，我们可以将其视为phase1content上的覆盖，因此将层次结构颠倒如下：

#phase1content {
  position: relative;
}

#phase1box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}

<div id="phase1content" class="phasecontent">
  <div id="phase1box">
    <h1>Phase 1</h1>
    <p>
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/>
    </p>
  </div>
</div>

width 100%按要求。当然是完美的。

方法1：尝试使用此方法来给予background-size，background-position，background-repeat CSS属性

#phase1content {
  position: relative;
}
#phase1box {
  position: absolute;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

<div id="phase1content" class="phasecontent">
  <div id="phase1box">
    <h1>Phase 1</h1>
    <p>
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/>
    </p>
  </div>
</div>

方法2：您也可以使用直接的背景图像作为父div #phase1content，而无需位置填充...