页面内容高度取决于jumbotron容器

Question

我正在使用带有以下css的jumbotron：

.jumbotron-billboard .img {
    opacity: 0.95;
    color: #fff;
    background: #000 url("http://localhost/wp-content/themes/img/jumbotron.jpg") center center;
    width: 100%;
    height: 400px;
    top:0;left:0;
    padding:0;
    position:absolute;
    z-index:1;
}
.jumbotron {background:white;}

.jumbotron .container {
  position:relative;
  background:rgba(255,255,255,0.8);
  border-radius:10px;
  top:20px;
    z-index: 2;
}  

由于图像的绝对位置，它不在流程中，下面的整个内容取决于jumbotron容器的大小。这或者导致背景图像与下面的内容无法合并或者根据不同的窗口大小而间隔太大。

有没有办法让背景图片更具动感？

以下是内容与背景图片互动的图片：http://imgur.com/a/IRVMA