How to set out the background image of a jumbotron at full size and make it responsive?

Question

I want to make the background image of the jumbotron to have full size without needing to state the height in pixes. Reason for that is that I want it to be responsive. Also I want the image to be underneath the transparent navbar.

You can take a look here

The code for it is:

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

The css is:

    .navbar-inner {
    background:transparent;
}

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

Answer 1

You could use a min-height of 100vh for your hero. And you have to position your navbar absolutely, like this:

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