--- title: "How to Add Auto Image Scroll Effect to a WordPress Container Background?" url: https://nexterwp.com/docs/add-auto-image-scroll-effect-to-a-wordpress-container-background/ date: 2024-11-28 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "A repeating pattern that drifts slowly sideways gives a section constant, quiet movement. It is the effect behind most animated banner strips. The Container block can scroll its background image..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Auto-Image-Scroll-Effect-to-a-WordPress-Container-Background_-1024x519.jpg word_count: 474 --- # How to Add Auto Image Scroll Effect to a WordPress Container Background? A repeating pattern that drifts slowly sideways gives a section constant, quiet movement. It is the effect behind most animated banner strips. The Container block can scroll its background image continuously, at a speed and direction you set. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/) ## Before You Start - **Edition:** **Pro** — the auto scroll background needs Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block with content inside — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).- A **seamlessly tiling** image. An image that does not tile will show a visible join on every pass. ## Steps - Select your **Container** and set its background type to **image**. - Choose your tiling background image. - Set the background effect to the **animated** option. - Choose the **direction** it should travel. - Set the **speed**, then publish and watch the real page. ## How It Behaves The direction and speed are written onto the container and the script scrolls the background accordingly. - **The background option comes first.** Measured: the individual effect settings do nothing on their own — the container only renders an effect once the background type that owns it is chosen.- **Measured on a published page** with the direction set to left and speed 45: the container rendered `columns_animated_bg row-bg-left` with `data-direction="left"` and `data-trasition="45"`.- **It runs on a timer, not on scroll.** The movement continues whether or not the visitor is doing anything — unlike [image scroll animation](https://nexterwp.com/docs/add-image-scroll-animation-effect-to-a-wordpress-container-background/), which follows the scroll.- **The image repeats to fill the width**, which is why tiling matters so much.- **Measured with Nexter Blocks Pro deactivated:** this effect disappears completely and the container renders as a plain section, with nothing on the page to say why. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, the animated background class is absent and the image sits still.- **A non-tiling image looks broken.** The seam travels across the section on every pass and is the first thing anyone notices.- **Fast is dizzying.** This should read as drift, not as motion.- **It never stops**, so it is constant work for the browser and constant movement for the reader.- **Text on top needs an overlay**, because the contrast under it changes continuously. ## Troubleshooting ### The background does not move Check an image background is set first and the animated effect is chosen — measured, the direction and speed alone render nothing. Then check Nexter Blocks Pro is active. ### I can see a line crossing the section The image does not tile seamlessly. Use one designed to repeat, or a pattern without obvious edges. ### It is too fast Lower the speed. For a background, slower is almost always better. ### It moves the wrong way Change the direction setting — measured, it is written onto the container as `row-bg-left` or its opposite. ## Related Docs - [Add an image scroll animation effect to a container background](https://nexterwp.com/docs/add-image-scroll-animation-effect-to-a-wordpress-container-background/)- [Add parallax effect to a container in WordPress](https://nexterwp.com/docs/add-parallax-effect-to-a-container-in-wordpress/)- [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding an auto image scroll effect to a WordPress container background?** A: Nexter Blocks Pro is required, and the effect only works on a Container block with content inside. The background image also has to tile cleanly, because the animation repeats the image across the width. If the image does not repeat well, the moving seam becomes obvious fast. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this Container background animation inside the Pro edition. **Q: Why is my container background not moving after I set the animation?** A: The usual miss is setting speed and direction before choosing an image background and the animated effect. Those settings do nothing on their own until the background type that owns them is selected. The other common blocker is inactive Pro access, because with Nexter Blocks Pro deactivated the animated background class disappears and the section stays still. In practice, check the background type first, then confirm Nexter Blocks Pro is active. **Q: How do I stop a visible line from crossing the animated background?** A: That line usually means the image does not tile seamlessly. The effect repeats the image to fill the width, so any edge or mismatch gets dragged across the section on every pass. A pattern designed to repeat works best here, especially if it has no obvious edges. For this effect in Nexter Blocks Pro, tiling matters more than almost anything else because a non-tiling image looks broken immediately. **Q: What speed should I use for an auto scrolling background in a WordPress section?** A: Slower is usually better for a background. The page calls out that fast movement is dizzying and that this should read as drift, not motion. Since the animation runs constantly on a timer rather than on scroll, high speed becomes constant visual noise instead of subtle movement. A lower speed keeps text readable and makes the section feel intentional instead of distracting. **Q: Does this background animation follow page scroll or run on its own?** A: It runs on a timer, not on scroll. That means the movement continues whether or not the visitor is doing anything, which is different from image scroll animation that follows scrolling. This matters when you design around text or banners because the motion never pauses. If you want constant quiet movement in a section, [Add an image scroll animation effect to a container background](https://nexterwp.com/docs/add-image-scroll-animation-effect-to-a-wordpress-container-background/) is the related behavior to compare against. **Q: Can I use this effect with text over the container background?** A: Text can sit on top of it, but it needs an overlay because the contrast under it changes continuously as the image moves. That changing backdrop can make copy harder to read if you skip the overlay. The practical rule is simple: treat this like an animated banner strip and protect readability first. For setup context, [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/) shows the base Container block this effect uses.