A background image that slowly glides across a section adds motion without video.
The Row Background widget from The Plus Addons for Elementor can move one or more images endlessly in the direction you choose, at the speed you choose.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Row Background widget is only available in The Plus Addons for Elementor Pro.
- Widget to enable: Row Background, switched on under The Plus Addons > Widgets.
- Where to put it: drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.
Steps
- Add the Row Background widget to the container and open Content > Middle Layer.
- Set Select Option to Auto Moving Layer.
- Open the first item, choose a picture in Upload Image and set Background Size.
- Choose a Direction (Right, Left, Top or Bottom), then set Opacity Image and Transition Speed.
- Use + Add Item to add more moving images. Give the upper ones an opacity below 1 so the images underneath stay visible.
The recording below shows these steps in the editor, followed by a short demo of the result.
You can also move a single background image from the Deep Layer: choose Creative Background Image, set Background Effect to Auto Moving Background Image, then pick a Move Direction and Transition Speed.
Settings
| Setting | What it does | Default |
|---|---|---|
| Direction | The way the image moves. Right moves it to the right, Top moves it down from the top. | None (moves left) |
| Opacity Image | Transparency of the image, 0 to 1. | – |
| Transition Speed | Higher values move faster (-100 to 100). | empty (slowest positive speed) |
| Responsive Visibility | Desktop, Tablet and Mobile switches for the item. | Off |
How It Behaves
- The image repeats and moves one pixel at a time without stopping.
- In our test, speed 50 moved the image about 50 px in 2.5 seconds and speed 90 about 260 px, while an empty speed moved it about 26 px.
- Several items move independently, each in its own direction and speed.
Limitations
- Responsive Visibility does not hide Auto Moving Layer images: with Desktop and Mobile turned off, the image was still visible at 1200, 800 and 390 px in our test.
- Transition Speed values below 0 make the movement slower, not reverse it. Use Direction to change the way the image moves.
Troubleshooting
The image moves the wrong way
Set Direction explicitly; None moves the image to the left.
Only the top image is visible
Lower Opacity Image on the items above so the ones below show through.
