Html 引导Jumbotron背景图像高度问题

我试图在jumbotron中显示一个图像（1920x800px）作为背景

HTML:

如图所示（托管在我的学校服务器上），由于容器的内容，图像的高度未完全显示。通过给.bg指定一个高度，我得到了完整的图像，但图像不再有响应。如何确保jumbotron能够显示图像的全部高度，但仍然能够响应移动设备

---

关于

尝试将jumbotron放入一行和一个容器中：

<div class="row">
  <div class="container">
    <div class="jumbotron bg">
    </div>
  </div>
</div>

将背景应用于

主体

而不是

div

。正如APAD1所写：主体{background:url（'../images/ac unity.jpg'）；}您是否试图使背景始终保持其父对象的100%宽度或100%高度？嗯，我不想在图像上有其他内容，除了jumbotron，所以我想最好把它放在jumbotron附近。我想知道jumbotron或容器是否有可能播撒整个图像，而不考虑标题内容。我希望jumbotron填充整个页面，因此容器必须位于jumbotron内。把它排成一行没有什么不同。

.bg {
  background: url('../images/ac-unity.jpg');
  background-size: cover;
}

.jumbotron {
padding: 30px 15px;
margin-bottom: 30px;
color: inherit;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

<div class="row">
  <div class="container">
    <div class="jumbotron bg">
    </div>
  </div>
</div>