Images not resizing correctly - JQuery Backstretch

Question

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 Backstretch. 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.

The website is live at www.alegowedding.co.za.

Here is the HTML code:

<p>
    <code>
        <section id='home' class='stag-custom-widget-area '>
            <aside id="stag_wedding_intro-3" class="widget wedding-intro">
                <!-- BEGIN #intro -->
                <section id="intro">
                    <script>
                        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});
                        });
                    </script>

                    <div class="wedding-couple-wrap">


                        <!-- END .wedding-couple-wrap -->
                    </div>

Some excerpts from the CSS:

#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;
}

Thanks a lot! Amy

Edit: Example

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. Cut Off

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. Less Cut Off

what are you trying to do? the image resizes based on its constraints — Moishy, Dec 30 '14 at 13:42
The width resizes correctly, but the height does not. On smaller monitors (like a square), it's fine, but on a wider monitor, the top and bottom of the images are cut off completely. This seems to be because the height is being limited to such an extent (335px) and nothing I do changes it. Please see my post edit for an example. — Amy, Dec 30 '14 at 17:23

score 0 · Accepted Answer · answered Dec 31 '14 at 10:37

The height is based upon a backstretch calculation. It switches between 355 and 200px depending on the width of the viewport. These values are set inline on the fly, so you would need to update the backstetch works out it's ratio to fix it.

Alternatively you can make some updates to the CSS and include !important so that the inline styles are overridden. For example...

@media (min-width:800px) {.backstretch {
   min-height: 400px!important;
}}
@media (min-width:1000px) {.backstretch {
   min-height: 450px!important;
}}
@media (min-width:12px) {.backstretch {
   min-height: 500px!important;
}}

Thank you so much! :) That worked - but instead of setting it on the backstretch element, I set it on the padding-top property on the element 'wedding-couple-info'. It seems that the padding had been constraining it. — Amy, Jan 05 '15 at 20:36

Images not resizing correctly - JQuery Backstretch

1 Answers1