title: Responsive background image in div full width
body: <p>I'm trying to figure out how to make a background-image in a div full width and responsive. The background-image is expanding across the width of the page (and is responsive), but the height of the image isn't its full height. It seems like it's being cut-off somehow. I'm using bootstrap framework, and the reason I'm trying to do this is I want to overlay some text on the image. I've tried so many different things but cant seem to figure it out, help! </p>
  
  <pre><code>&lt;div class="bg-image"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row-fluid"&gt;
        &lt;div class="span12"&gt;
          &lt;h1&gt;This is some text&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
    .bg-image {
    background: url(img/image.jpg) no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    max-height: 450px;
    }
  </code></pre>