如何設置完整大小的超大背景圖像並使其具有響應能力？

Question

我想使超大屏幕的背景圖像具有完整大小，而無需以像素表示高度。 原因是我希望它能夠響應。 另外，我希望圖像位於透明導航欄下方。

你可以在這里看看

它的代碼是：

    <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;
}

Answer 1

您可以為英雄使用最小高度100vh 。 而且您必須絕對定位導航欄，如下所示：

https://codepen.io/Sixl/pen/oBrxKr