Home/ Questions/Q 7952819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T02:58:28+00:00

I have a div container which has a repeating background image that forms a

  • 0

I have a div container which has a repeating background image that forms a pattern, and I would like to animate it with jQuery so that the pattern moves south-west.

How can this be done?

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="content/main.css">

    <script src="content/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#container").animate({
            'background-position': '1110px 1110px'
        }, 1000, function () {
        });
    });
    </script>

</head>

<body>

    <div id="container">

    </div>

</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at Sprightly. It’s a jQuery plugin and makes animating background images reasonably easy.

    To pan (animate a background image), the documentation gives this code as an example:

    $('#trees').pan({fps: 30, speed: 2, dir: 'left'});

    If you’re looking for a simpler, lighter approach, this plugin may be a better solution. To animate a background, give it an offset:

    $('.elem').animate({backgroundPosition: '500px 150px'})
    • 0