如何在响应式设计中使用负余量？

Question

我正在尝试创建一个具有固定背景图像的元素，该元素随后会使用负边距放置在背景图像上。

我想知道设置billboard__image的高度的最佳方法，因为它会根据浏览器的宽度而动态变化，然后在billboard_content上使用负填充来包含这些元素在背景图片上向上移动。

我也在使用引导程序4.3.1：

.section {
  clear: both;
  width: 100%;
  padding: 50px 0;
}
.billboard {
  padding: 0 !important;
}
.billboard__image {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  width: 100%;
}

.billboard__image::after {
  content: "";
  padding-top: 33.3333333333%;
  display: block;
}

.billboard__image--fixed {
  background-attachment: fixed;
}

.billboard__content {
  background: #fff;
  padding: 100px;
  margin: -50% 0 0 0;
  position: relative;
}

.billboard__content--video {
  padding: 0 !important;
  background: transparent !important;
  text-align: center;
}

.billboard__content--video h3 {
  color: #fff;
  text-shadow: 5px 5px 10px black;
}

.billboard__content--video .embed-responsive {
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.65);
  background: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section billboard">
  <div class="billboard__image billboard__image--fixed" style="background-image:url('https://www.rollingstone.com/wp-content/uploads/2018/06/fleetwood-mac-new-lineup-first-picture-2018-77e1da91-6a10-46d3-8b48-a203c150139c.jpg?resize=1800,1200&w=1200')">
  </div>
  <div class="container">
    <div class="billboard__content billboard__content--video">
      <h3>Fleetwood Mac</h3>
      <div class="embed-responsive embed-responsive-16by9 video">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wLSUDSNqLgQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

这是我的小提琴代码示例：https://jsfiddle.net/zeropsi/Lkbhs41x/。

有没有想到让内容框在负空间中响应而不移动到背景图像上方的最佳方法？

编辑：这是我要完成的工作的图像：