Olá. preciso da vossa ajuda.
Meu Parallax não está responsivo ele quebra quando diminuo a resolução da 
tela. Tenho 2 Backgrounds e uma imagem normal, a minha ideia é que o background2
não vaza quando diminuo a resolução da tela.

  HTML 

 <div id="background1">
    <div class="largura-imagem" >
        <div class="flutuar">
            <a class="btn_ga_click" href="" title="">
                <img src="imagem"  alt="" > 
            </a>
        </div>
        <div class="background2"></div>
    </div>
</div>


     
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://dafitistatic-a.akamaihd.net/cms/kanui/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="https://dafitistatic-a.akamaihd.net/cms/kanui/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="https://dafitistatic-a.akamaihd.net/cms/kanui/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $('#background1').parallax("76%", 0.1);
  $('.background2').parallax("76%", 0.3);
 
})

</script>

<script type="text/javascript">
  
(function($) {
    var $window = $(window);
    var windowHeight = $window.height();

    $window.resize(function() {
        windowHeight = $window.height();
    });

    $.fn.parallax = function(xpos, speedFactor, outerHeight) {
        var $this = $(this);
        var getHeight;
        var firstTop;
        var paddingTop = 0;

       
        $this.each(function() {
            firstTop = $this.offset().top;
        });

        if (outerHeight) {
            getHeight = function(jqo) {
                return jqo.outerHeight(true);
            };
        } else {
            getHeight = function(jqo) {
                return jqo.height();
            };
        }

        if (arguments.length < 1 || xpos === null) xpos = "50%";
        if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
        if (arguments.length < 3 || outerHeight === null) outerHeight = true;

        // function to be called whenever the window is scrolled or resized
        function update() {
            var pos = $window.scrollTop();

            $this.each(function() {
                var $element = $(this);
                var top = $element.offset().top;
                var height = getHeight($element);

                if (top + height < pos || top > pos + windowHeight) {
                    return;
                }

                $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
            });
        }

        $window.bind('scroll', update).resize(update);
        update();
    };
})(jQuery);

</script>





<style>
    
#background1{
  background: url(imagem.jpg);

    padding: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    width: auto;
    height: auto;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    left: 0;
    top: 0;
    background-position: 39% 0;
}

.background2{
background: url(imagem.png)76% fixed;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    z-index: 1;
    width: 316%;
    background-repeat: no-repeat;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    left: 0;
    top: 0;
    bottom: 0;
   
}

</style>