Javascript background-position on large screen in Chrome

Question

Could you please have a look on this home page, on Google Chrome with a large screen size (the problem appears between 1870px and 1920px): http://theatredulamparo.fr

In fact, when you scroll hover the window from left to right, the background position changes to show the pictures contained in the sprite and opens the big top door, but in that case, it also moves from top to bottom which is not what's expected. I'm a bit in trouble with that because the problem doesn't show on other browsers (Safari and Firefox are ok).

Any ideas?

Here is my code:

    var portion = 0;
    var numPortion = 0;
    var chemin = "";
    var largeur =0;
    var hauteur = 0;
    var position = 0;
    var entrer2 = null;

    function Initwrap(){
       largeur = $('#wrapperbg').width();
       hauteur = (largeur*0.590277778)-1;
       $('#wrapperbg').height(hauteur);
    }

    // Changer le background position du sprite
    function BgAnim(hauteur, position){
      $('#wrapperbg').css({"background-position": "0 -"+position+"px", "height":hauteur});
    }

    function Entrer(chemin, numPortion, hauteur){
        //Cacher les boutons
        $('.callto').hide();
        //Lancer l'animation d'entrée dans chapiteau
        entrer2 = setInterval(function(){
    if (numPortion<=20){
        position = (hauteur+1)*numPortion;
        BgAnim(hauteur, position);
        numPortion++;
    } else {
        clearInterval(entrer2);
        window.location=chemin;
    }
}, 100);
    }


    $(document).ready(function(){

Initwrap();



    //lorsque la souris se déplace dans la page
    $("body").mousemove(function(e){

        Initwrap();

        portion = $('body').width()/9; //découpage écran en 12 portions (12 images)
        numPortion = Math.floor(e.pageX/portion); //la portion où se trouve la souris

        position = (hauteur+1)*numPortion;

        // lorsque la souris sort du cadre
        if(numPortion>8){
            position=8;
        }
        if(numPortion<0){
            position=0;
        }

        if(largeur > 1024){
            BgAnim(hauteur, position); //lance l'effet de survol
        }
    });


    //Au click sur un call2action
    $('#callto1').click(function(e){
        if(largeur > 1024){
            e.preventDefault();
            //chemin ='tpl_actu_fiche.html';
            chemin ='index.php?id=2';
            $("body").unbind('mousemove');
            Entrer(chemin, numPortion, hauteur);
        }
    });

    $('#callto2').click(function(e){
        if(largeur > 1024){
            e.preventDefault();
            //chemin ='tpl_contact.html';
            chemin ='index.php?id=30';
            $("body").unbind('mousemove');
            Entrer(chemin, numPortion, hauteur);
        }
    });



    });

    $(window).resize(function(){
        portion = 0;
        numPortion = 0;
        chemin = "";
        position = 0;
        entrer2 = null;
        largeur = $('#wrapperbg').width();

        Initwrap();

        if(largeur > 1024){
            BgAnim(hauteur, position); //lance l'effet de survol
        }

    });

Answer 1

I was able to get this into a working state by using background-size:cover

#wrapperbg{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  -moz-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
  background-image: url('../images/animation/spritechap.jpg');
}