Background Animation Fail !

Background Animation Fail !

Hello i'm want to animate 2 background but it don't work.

http://www.arbreentete.fr/index.php

Css:
  1. div.art-Header-png-fond
    {
        position: absolute;
        z-index:-4;
        top: 0;
        left: 0;
        width: 932px;
        height: 200px;
        background-image: url('../images/printemps_fond.png');
        background-repeat: no-repeat;
        background-position: left top;
    }
    div.art-Header-png-building
    {
        position: absolute;
        z-index:-3;
        top: 0;
        left: 0;
        width: 932px;
        height: 200px;
        background-image: url('../images/printemps_building.png');
        background-repeat: no-repeat;
        background-position: 570px 20px;
    }
    div.art-Header-png-tree
    {
        position: absolute;
        z-index:-2;
        top: 0;
        left: 0;
        width: 932px;
        height: 200px;
        background-image: url('../images/printemps_tree.png');
        background-repeat: no-repeat;
        background-position: 600px 30px;
    }

    a.art-Header-jpeg
    {
        position: absolute;
        display:block;
        z-index:-1;
        top: 0;
        left: 0;
        width: 932px;
        height: 200px;
        background-image: url('../images/logo.png');
        background-repeat: no-repeat;
        background-position: 40px 30px;
    }
















































HTML:

  1.                 <div class="art-Header-png-fond">
                    </div>
                    <div class="art-Header-png-building">
                    </div>
                    <div class="art-Header-png-tree">
                    </div>
                    <a href="<?php echo $baseUrl; ?>/" class="art-Header-jpeg">
                    </a>







JQUERY
  1. jQuery(document).ready(function(){
            jQuery.noConflict();
           
            //jquery stuff
            jQuery('.art-Logo').css({'left' : '-9000px'});
            jQuery('.art-Header-jpeg').fadeOut(1).fadeIn(3000);
           
            // Building et Tree
            jQuery('.art-Header-png-building').css({backgroundPosition : '570px 200px'}).animate({backgroundPosition : '570px 20px'},2000);
            jQuery('.art-Header-png-tree').css({backgroundPosition : '600px 200px'}).animate({backgroundPosition : '600px 30px'},2000);
           
            jQuery('.art-Header-jpeg').mouseover(function(){
                            // On abaisse
                            jQuery('.art-Header-jpeg').stop(true,true);
                            jQuery(this).animate({backgroundPosition : '10px 30px'},100)
                                        .animate({backgroundPosition : '70px 30px'},100)
                                        .animate({backgroundPosition : '20px 30px'},100)
                                        .animate({backgroundPosition : '60px 30px'},100)
                                        .animate({backgroundPosition : '30px 30px'},100)
                                        .animate({backgroundPosition : '50px 30px'},100)
                                        .animate({backgroundPosition : '35px 30px'},100)
                                        .animate({backgroundPosition : '45px 30px'},100)
                                        .animate({backgroundPosition : '38px 30px'},100)
                                        .animate({backgroundPosition : '43px 30px'},100)
                                        .animate({backgroundPosition : '40px 30px'},100);
                            //jQuery(this).fadeTo(1000,0.5)
                        }).mouseout(function(){
                            // On remonte
                            jQuery('.art-Header-jpeg').stop(true,true);
                            jQuery(this).css({backgroundPosition : '40px 30px'});
                            //jQuery(this).fadeTo(1000,1.0)
                        });
           
        } );
































Mouseover work but nop animation un tree and building.

Thx