Comment définir l'image de fond d'un jumbotron en taille réelle et le rendre réactif?

Question

Je souhaite que l'image d'arrière-plan du jumbotron soit pleine taille sans avoir besoin d'indiquer la hauteur en pixels. La raison en est que je veux que ce soit réceptif. Aussi je veux que l'image soit sous la barre de navigation transparente.

Vous pouvez jeter un oeil here

Le code est:

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

Le css est:

.navbar-inner { 
    background:transparent; 
} 

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

Answer 1

Vous pouvez utiliser un min-hauteur de 100vh pour votre héros . Et vous devez positionner votre barre de navigation absolument, comme ceci:

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