html - How to scale jumbotron bootstrap on larger monitors? -

i have website uses jumbotron feature bootstrap taken codecademy "how make website" tutorial.

in it, uses following html:

<div class="jumbotron">         <div class="container">             <h1>heading</h1>             <p>tagline</p>             <a href="#about"><button type="button" class="btn btn-lg btn-danger">learn more</button></a>             <!--<a href="#">learn more</a>-->         </div>     </div> 

and following css:

.jumbotron {   background-image:url("flight.jpg");   height: 500px;   background-repeat: no-repeat;   background-size: cover;   margin-bottom:0px; }  .jumbotron .container {   position: relative;   top:100px; }  .jumbotron h1 {   color: #cc0000;   font-size: 48px;     font-family: 'shift', sans-serif;   text-shadow:none; }  .jumbotron p {   font-size: 20px;   color: #cc0000;   text-shadow:none; } 

the background image not scaling when larger monitor used, , image increases in size within div, div stays same size. result looks zoom on image rather image staying whole.

any idea how make scale on larger monitors?

change to

oh apologive misunderstanding question need edit css .jumbotron needs cover , position center.

.jumbotron { background-size: cover; background-position: center;  } 

add container div around jumbotron!

<div class="container">     <div class="jumbotron">         <div class="container">             <h1>heading</h1>             <p>tagline</p>             <a href="#about"><button type="button" class="btn btn-lg btn-danger">learn more</button></a>             <!--<a href="#">learn more</a>-->         </div>     </div> </div>