Skip to content

How to Add Image Rotating Background to a WordPress Container?

Key Takeaways

  • Nexter Blocks Container uses Creative Gallery under Style > Background Deep Layer to turn multiple images into a rotating background with a transition effect, without custom code.
  • Creative Gallery provides Select Multiple Images, Transition Effects, Transition Duration (ms), Slide Delay Time (ms), Animation, and Texture Overlay controls for the background slideshow.
  • Creative Gallery rotates images only, not videos or solid colors, and at least two images are needed to see a rotation.
  • Slide Delay Time (ms) controls how long each image stays visible before the next transition starts, while Transition Duration (ms) controls how long the transition animation takes.
Table of Contents

What It Does

The Container block’s Creative Gallery option, under Background Deep Layer, turns a set of images into a rotating background. Instead of one static photo, the container cycles through multiple images with a transition effect, without any custom code.

To check the complete feature overview documentation of the Nexter Blocks Container block, click here.

Requirement: This block is part of Nexter Blocks. Make sure Nexter Blocks is installed and activated.

Why It Matters

A rotating photo background gives a section movement and depth that a single static image can’t, without slowing the page down with a full carousel plugin or custom scripting. It’s a lightweight way to make a hero or feature section feel alive.

What You Get

  • A Creative Gallery option under Style > Background Deep Layer
  • A Select Multiple Images field to choose as many photos as you want to cycle through
  • Transition Effects, Transition Duration (ms), and Slide Delay Time (ms) controls
  • An Animation option for directional motion, and a Texture Overlay to soften busy photos

Benefits

  • Portfolio and agency websites that use full-width sections with rotating image galleries as backgrounds
  • Event pages that cycle through multiple event photos as the section background
  • Product landing pages where rotating lifestyle images reinforce the content above

Capabilities

Upload any number of images to the gallery. Control how each image transitions into the next (Transition Effects, e.g. Fade), how long that transition takes (Transition Duration), and how long each image stays on screen before switching (Slide Delay Time). Add directional Animation for extra motion, or a Texture Overlay to reduce the visual intensity of busy photos.

How It Works

Once Creative Gallery is selected, the container treats the uploaded images as a background slideshow: each image displays for the Slide Delay Time, then transitions to the next using the chosen Transition Effect over the Transition Duration. This runs independently of any foreground content placed inside the container.

How to Use It

Add the Container block to the page and follow the steps below.

1. Go to Style > Background Deep Layer, then select Creative Gallery from the Select Background Option dropdown. This activates the rotating image background feature for the container.

Background Deep Layer Creative Gallery panel in the Container block
Container > Style > Background Deep Layer with Creative Gallery selected, showing image, transition, and texture controls
Opening Background Deep Layer and selecting Creative Gallery

2. Select your images from the Select Multiple Images section. Add as many images as you want to cycle through in the rotating background.

3. From the Transition Effects dropdown, select the visual transition used when the background switches between images.

4. From the Transition Duration (ms) field, set how long the transition animation takes in milliseconds. A shorter value creates a quicker switch between images, while a longer value makes the transition slower.

5. In the Slide Delay Time (ms) field, enter how many milliseconds each image stays visible before the next transition begins. Use a higher value to give visitors more time to view each background image.

6. From the Animation dropdown, add a movement animation to the slide transition, if you want directional motion during the switch. To add a continuously scrolling image background instead, see How to Add Auto Image Scroll Effect to a WordPress Container Background.

7. From the Texture Overlay dropdown, apply a pattern or texture on top of the rotating images to reduce the visual intensity of busy background photos.

The container now displays a rotating image background.

Container background rotating through the selected images

Use Cases

  • Portfolio and agency websites that use full-width sections with rotating image galleries as backgrounds
  • Event pages that cycle through multiple event photos as the section background
  • Product landing pages where rotating lifestyle images reinforce the content above

Limitations

  • Creative Gallery rotates images only, not videos or solid colors – use Creative Video or On Scroll Animation under the same panel for those.
  • At least two images are needed to see a rotation; a single image shows no transition.
  • Large, unoptimized images will slow the transition and the page – compress images before uploading for the smoothest effect.

Troubleshooting

  • Background isn’t rotating – confirm at least two images are selected under Select Multiple Images; a single image will not visibly transition.
  • Transition looks abrupt or choppy – increase Transition Duration (ms), or try a different Transition Effect.
  • Images change too quickly or too slowly – adjust Slide Delay Time (ms), which controls how long each image stays visible before the next transition starts.

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!