Why is my responsive background image leaving white space at the bottom of the image?

Question

I have a responsive image which is leaving white space under the image when resizing the browser. I tried cover but the image doesn't resize at all only setting the background to 100% gives perfect responsiveness. I tried multiple other solutions from stack overflow and none seem to work.

error here :https://drive.google.com/open?id=0BxHtDrLLi2x5ckJNMVVNblRSSWc

css:

  #jumbotron{
  text-align:center;
  background-color:#71706e;
  padding-top:80px;
  width:100%;
  background: url(images/showcase5.jpg) no-repeat;
  background-size: 100%;
 }

html:

<section id = "jumbotron">
  <div class="text">
    <h1 class="animated slideInDown">Now now now!</h1>
    <h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
    <a href="#" class="learnMore " >Get Started</a>
  </div>
</section>
<div id="recent">
  <h3>Recent Projects</h3>
</div>

Answer 1

The general concept is to set the height of the container to 0 and use a vertical padding that matches the background image aspect ratio. To get that padding, divide the image height by the width and multiply by 100 to get a percentage. Then the div will scale the same as the background image. And just set the background size to 100%, contain, or cover.

#jumbotron {
  background: url('http://placehold.it/1920x1265') 0 0 no-repeat / cover;
  padding-bottom: 65.89%;
  height: 0;
  text-align: center;
}

<section id = "jumbotron">
  <div class="text">
    <h1 class="animated slideInDown">Now now now!</h1>
    <h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
    <a href="#" class="learnMore " >Get Started</a>
  </div>
</section>
<div id="recent">
  <h3>Recent Projects</h3>
</div>