Home/ Questions/Q 7754295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:16:14+00:00

The website I am working on has a repeating background pattern applied to the

  • 0

The website I am working on has a repeating background pattern applied to the <body>. The pattern is not fixed and scrolls vertically as expected when scrolling up or down the page.

There is a reel at the top of the with three sets of text. These sets slide left to right on the press of some navigation items:

enter image description here

At the moment, the text moves left/right, however the background remains horizontally fixed (this is also expected).

The goal is to animate the background pattern in a given direction at the same speed as the movement of the text to give the effect of a complete scroll left or right, rather than the text “sliding” on top of the canvas left or right.

I’ve used a JQuery plugin before that let me animate the background-position value of an element, maybe something that will work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Absolutely! I would use the background position jQuery plugin:
    http://www.protofunc.com/scripts/jquery/backgroundPosition/

    Here is a tutorial for a cool effect using this concept and may give you some ideas. http://snook.ca/archives/javascript/jquery-bg-image-animations

    I’d also suggest that you move the background image into a div just inside the body, as this will give you more flexibility should you need to tweak anything a little further.

    • 0