title: How do I make an image stretch to fit inside of a div in a fluid layout
body: <p>I'm using Twitter's Bootstrap fluid layout.  This is a snippet of my code</p>
  
  <pre><code>&lt;div class="hero-unit" style="background-image:url('images/ball on sand.JPG'); background-size:100%;"&gt;
    &lt;h1&gt;Pelican Volleyball&lt;/h1&gt;
    &lt;p&gt;The northshore's premiere outdoor volleyball organization&lt;/p&gt;
    &lt;p&gt;&lt;a href="index.php?p=about" class="btn btn-primary btn-large"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I make my window too narrow, the image "ball on sand" will repeat.  I just want the height of my image to stretch to fit entirely in the hero-unit div.  How do I do this?</p>