title: Bootstrap Full Background Image Being Pushed Down
body: <p>I am currently using twitter bootstrap and having an issue when trying to have the html background image display a full screen</p>
  
  <p>Instead of my columns having a background image behind them they actually push the background image to the very bottom of the page instead of allowing it lay behind them.</p>
  
  <p>Any ideas here?</p>
  
  <p>This is whats happening <a href="http://i44.tinypic.com/wiudyv.png" rel="nofollow">Screenshot of error</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Sandbox&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;&lt;img src="images/rock-overlook.jpg" class="img-responsive" alt="" /&gt;&lt;/div&gt;
              &lt;div class="col-md-4"&gt;&lt;img src="images/rock-overlook.jpg" class="img-responsive" alt="" /&gt;&lt;/div&gt;
              &lt;div class="col-md-4"&gt;&lt;img src="images/rock-overlook.jpg" class="img-responsive" alt="" /&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html { 
    background: url(../images/umbrellas.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  </code></pre>