title: Images not resizing correctly - JQuery Backstretch
body: <p>I am trying to edit a WordPress template that I purchased. The slideshow images, the centerpiece of the homepage, are not resizing properly when the browser window is resized. The height also seems to be fixed at a very small height and no matter what CSS changes I make, it doesn't seem to change anything. The developer seems to have used a JQuery plugin called <strong><a href="http://srobbin.com/jquery-plugins/backstretch/" rel="nofollow noreferrer">Backstretch</a></strong>. But the plugin is nested within numerous other elements and isn't working properly. I have quite a bit of HTML and CSS experience, but none in JQuery, so cannot seem to find the solution.</p>
  
  <p><strong>The website is live at <a href="http://www.alegowedding.co.za" rel="nofollow noreferrer">www.alegowedding.co.za</a>.</strong></p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;p&gt;
      &lt;code&gt;
          &lt;section id='home' class='stag-custom-widget-area '&gt;
              &lt;aside id="stag_wedding_intro-3" class="widget wedding-intro"&gt;
                  &lt;!-- BEGIN #intro --&gt;
                  &lt;section id="intro"&gt;
                      &lt;script&gt;
                          jQuery(document).ready(function($){
                          $('#intro .wedding-couple-wrap').backstretch(
                                  [
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Horse-and-Carriage-2_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ame-Ash-lego2_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/built_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ash-drums-jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ame-Ash-Peri_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Spiderman_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Gollum_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-guitar_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-and-Harry_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Darth-band-2_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Lightsabers_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-and-Raphael_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Bart_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Fallen_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ash-darth_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Homer_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-and-Image2.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Piece-of-resistance_jul.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Marriage_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/AshUm_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Wolverine_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Iron-Man_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Magneto_julia.jpg",
                                      "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Hagrid_julia.jpg"
                                  ], {duration: 3000, fade: 750});
                          });
                      &lt;/script&gt;
  
                      &lt;div class="wedding-couple-wrap"&gt;
  
  
                          &lt;!-- END .wedding-couple-wrap --&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Some excerpts from the CSS:</p>
  
  <pre><code>#intro {
    max-width: 100%;
    min-height: 200px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: relative;
    margin-bottom: 50px;
  }
  
  .wedding-couple-wrap {
    padding-top: 335px;
    bottom: 0;
    display: block;
    width: 100%;
    height: auto;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  </code></pre>
  
  <p>Thanks a lot!
  Amy</p>
  
  <p><strong>Edit: Example</strong></p>
  
  <p>The image below is being viewed on a full screen browser on a 1080p monitor. The top and bottom of the image is cut off.
  <img src="https://i.stack.imgur.com/PmyU5.png" alt="Cut Off"></p>
  
  <p>The image below is on the same monitor, but I have resized the browser to make it smaller in width. Now the height is better, but still doesn't show the full image.
  <img src="https://i.stack.imgur.com/mNP56.png" alt="Less Cut Off"></p>