I'm trying to do a simple background animation using jQuery. But the animation is not smooth. How can I make it smooth ? Following is the code and the image that is being used has a size of 4288 X 3216 px

```
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>bg</title>
    <style>
    #mydiv
    {
        background:url(bg2.jpg) repeat-x;
        height:900px;
        width:100%;
    }
    </style>

    </head>

    <body>

    <div id="mydiv">

    </div>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/bgpos.js"></script>
    <script type="text/javascript">
    $(document).ready (function()
            {
                move();

    function move()
    {
        $('#mydiv').animate({"backgroundPosition":"+=5"},100,"linear",move);
    };

    });
    </script>
    </body>
    </html>

```