Bootstrap Full Page Background
<p>I have been fighting with a full page background image in Bootstrap. Currently the background image covers 90% of the page but I cannot get the last 10% of the page. It behaves like there is a bottom margin somewhere, but there isn't. </p>

<p>HTML:</p>

<pre><code>&lt;body&gt;

  &lt;div class="jumbotron"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;div class="text-center"&gt;
            &lt;h1 style="font-weight: 400;" class="headline"&gt;&lt;br&gt;&lt;/h1&gt;
            &lt;h2 style="font-weight: 400;" class="tagline"&gt;&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 

      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-6"&gt;
            &lt;div class="embed-responsive embed-responsive-16by9"&gt;
            &lt;iframe class="embed-responsive-item" src="https://player.vimeo.com/video/139447981" id="video"&gt;&lt;/iframe&gt;
            &lt;/div&gt;
          &lt;/div&gt;

        &lt;div class="col-sm-6"&gt;
          &lt;div class="text-center"&gt;
            &lt;h3&gt;&lt;%= t('.call_to_action_headline') %&gt;&lt;/h3&gt;&lt;br&gt; 
            &lt;h4 class="counter"&gt;123&lt;/h4&gt;
            &lt;p&gt;&lt;%= t('.endline') %&gt;&lt;/p&gt;

            &lt;div class="subscribe text-muted text-center"&gt;
              &lt;%= form_for @user do |f| %&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-xs-12"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;%= f.text_field :email, class: 'form-control form-control-lg',
                      placeholder: 'Your email' %&gt;
                      &lt;span class="input-group-btn"&gt;
                      &lt;%= f.submit t('.submit_button'), class: 'btn btn-primary btn-lg' %&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;% end %&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>CSS:</p>

<pre><code>@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

@import "bootstrap";
@import "font-awesome";

body {
  background-color: #ffffff;
}

.headline {
  margin-top: 80px;
  color: white;
}

h3 {
  color: white;
}

#video {
  margin-bottom: 300px;
}

p {
  color: white;
}

.counter {
  font-size: 5rem;
  color: white;
}

.tagline {
  margin-top: 20px;
  margin-bottom: 100px;
  color: white;
}


.jumbotron {
  background: image-url('home-bg-1.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  height: 100%;
  background-color: #ffffff;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);

  .jumbotron-text {
    min-height: 25rem;
    padding-top: 8rem;
    padding-bottom: 6rem;

    .container {
      max-width: 50rem;
    }
  }
}
</code></pre>

<p>I'd like to have a full screen background image. Here is how it looks: <a href="http://imgur.com/sdHJeZO" rel="nofollow">http://imgur.com/sdHJeZO</a></p>

<p>Thanks</p>