title: jQuery Backstretch fixed height
body: <p>I've seen a few topics of this on the internet, however none were relevant in solving my problem. I'm currently using the jQuery plugin Backstretch and have successfully implemented it as a background for the whole page. However, I'd like to use it within a div with a fixed height. So rather than taking up the whole page, it sort of acts as an image slider.</p>
  
  <p>I used the documentation off of Backstretch's Github to try and implement it but no luck. The div itself is sectioned off (there's a big white space where it should be) but no image.</p>
  
  <p>Thanks for the help!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"/&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crimson+Text"&gt;
    &lt;script src="jquery.js"&gt;&lt;/script&gt;
    &lt;script src="jquery.backstretch.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="backstretch"&gt;
      &lt;script&gt;
        $(".foo").backstretch("test1.jpg");
      &lt;/script&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
  
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
  
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With styles:</p>
  
  <pre><code>.backstretch{
   width: 100%;
   height: 500px;
  }
  </code></pre>