Html 具有后台img问题的引导容器

我有一些简单的HTML和CSS代码，我希望有一个带有类容器的div，这个div需要有一个img作为背景。在父div中，我有一个带有类行的div，在它里面我有两个div类：class=“col-md-3”和col-md-9

问题是现在子div没有显示container div

换句话说，我希望我的container div是背景，所有内容都显示在它上面

有什么建议吗

HTML:

<div class="container bckgroud">
  <div class="row">
    <div class="col-md-3">
      <h1>here is test for the me</h1>
    </div>
  <div class="col-md-9"></div>
  </div>
</div>

body, html {
  background-color: #071a0f;
}

h1 {
  color: aqua;
}

.bckgroud {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
  background-image: url("../images/backg.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 66.64%; 
  /* (img-height / img-width * width) */
  /* (853 / 1280 * 100) */                
}

实际结果：

<div class="container bckgroud">
  <div class="row">
    <div class="col-md-3">
      <h1>here is test for the me</h1>
    </div>
  <div class="col-md-9"></div>
  </div>
</div>

body, html {
  background-color: #071a0f;
}

h1 {
  color: aqua;
}

.bckgroud {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
  background-image: url("../images/backg.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 66.64%; 
  /* (img-height / img-width * width) */
  /* (853 / 1280 * 100) */                
}

---

你的意思是这样的？ 设置您的集装箱

高度：100vh
并删除填充，它将div推到了底部


@charset“utf-8”；
/*CSS文档*/
身体，hmtl{
背景色：#071a0f；
保证金：0；
}
h1{
颜色：浅绿色；
}
卡格鲁德先生{
宽度：100%；
高度：100vh；
背景：线性梯度（rgba（255255,1），rgba（255255,1））；
背景图像：url（“https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
背景尺寸：包含；
背景重复：无重复；
}

这是我的测试
你的意思是这样的？
设置您的集装箱
高度：100vh
并删除填充，它将div推到了底部


@charset“utf-8”；
/*CSS文档*/
身体，hmtl{
背景色：#071a0f；
保证金：0；
}
h1{
颜色：浅绿色；
}
卡格鲁德先生{
宽度：100%；
高度：100vh；
背景：线性梯度（rgba（255255,1），rgba（255255,1））；
背景图像：url（“https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
背景尺寸：包含；
背景重复：无重复；
}

这是我的测试
类似这样的事情，也许：

body {
  background-color: #071a0f;  
}

h1 {
  color: aqua;
}

.bckgroud {
  height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

也许是这样的：

body {
  background-color: #071a0f;  
}

h1 {
  color: aqua;
}

.bckgroud {
  height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}


body，html{
颜色：白色！重要；
}
卡格鲁德先生{
背景图像：url（“https://i.stack.imgur.com/tAAGm.jpg");
背景尺寸：封面；
}

这是我的测试
福

body，html{
颜色：白色！重要；
}
卡格鲁德先生{
背景图像：url（“https://i.stack.imgur.com/tAAGm.jpg");
背景尺寸：封面；
}

这是我的测试
福
但这并没有涵盖我所需要的全部内容我需要背景img完全显示，而不仅仅是itI的一部分我更新了我的答案，您只需添加背景尺寸：cover；）但这并没有涵盖我所需要的全部内容我需要背景图片得到充分展示不仅仅是itI的一部分我更新了我的答案，你只需要添加一个背景尺寸：封面；）