title: Bootstrap Full Page Background
body: <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>