如何设置完整大小的jumbotron的背景图像并使其响应？

我想使jumbotron的背景图像具有完整的大小，而无需说明像素中的高度。原因是我希望它能够做出反应。另外我希望图像位于透明导航栏下方。如何设置完整大小的jumbotron的背景图像并使其响应？

你可以看看here

它的代码是：

<nav class="navbar-inner navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Cosmos</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav pull-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 
<div class="row"> 
    <div class="col-md-12"> 
    <div class="jumbotron" id="first"> 
     <h1 class="text-center" id="h1first"> 
     Welcome to Cosmos<br> 
     web design 
     </h1> 
    </div> 
    </div> 
</div>

的CSS是：

.navbar-inner { 
    background:transparent; 
} 

#first { 
    background-image: url(http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg); 
    background-size: cover; 
    height: 900px; 
}

来源

2017-02-19 George Kech