WP Manifestindependent plugin directory
manifest / media / css-random-background

CSS Random Background

Create lightweight random background image galleries and apply them to any WordPress container using generated CSS classes.

by Cristian Amezquita · github.com/junkdog505/css-random-background

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/junkdog505/css-random-background/archive/refs/heads/main.zip
Readme github.com/junkdog505/css-random-background ↗

Create lightweight random background image galleries and apply them to any WordPress container using generated CSS classes.

Description

CSS Random Background lets you create multiple image galleries from the WordPress admin. Each gallery generates a unique CSS class such as random-bg-img-123.

Add that class to any container in Elementor, Gutenberg, Bricks, Divi, classic themes or custom HTML. On page load, the plugin selects one image randomly, preloads it and applies it as a background with optional fade and overlay effects.

The plugin is intentionally lightweight: vanilla JavaScript, no jQuery dependency and no slider behavior.

MVP Features

  • Multiple background galleries.
  • Automatic CSS class per gallery.
  • Media Library image selection with sortable thumbnails.
  • Random background image on page load.
  • Optional auto-sequential rotation (change image every X seconds).
  • Background size, position and repeat controls.
  • Optional fade-in effect with configurable duration.
  • Optional color overlay with configurable color and opacity.
  • No flickering: images are preloaded before being shown.
  • Compatible with Elementor, Gutenberg, Bricks, Divi and custom HTML.

Installation

  1. Upload the random-background-images folder to /wp-content/plugins/.
  2. Activate the plugin through the WordPress Plugins screen.
  3. Go to Settings > CSS Random Background in the admin menu.
  4. Create a gallery and select images from the Media Library.
  5. Copy the generated CSS class.
  6. Add the class to any container.

Usage

Example class generated by a gallery:

random-bg-img-123

Elementor:

Add the class in Advanced > CSS Classes.

Gutenberg:

Add the class in Block > Advanced > Additional CSS class(es).

HTML:

<div class="random-bg-img-123">Content</div>

Frequently Asked Questions

Does it require jQuery?

No. The frontend uses vanilla JavaScript.

Does it work with Elementor and Gutenberg?

Yes. Any tool that lets you add a CSS class to a container can use the generated gallery class.

Does it create sliders?

No. This plugin provides lightweight random backgrounds. The optional auto-rotation feature cycles through images but is not a slider or carousel replacement.

How does the sequential rotation work?

Enable "Auto rotate" in the Rotation settings section and set an interval (seconds). The background will fade out, switch to a new random image, and fade back in each cycle.

Changelog

1.0.0

  • Initial MVP release.
  • Added gallery custom post type.
  • Added Media Library image selector.
  • Added generated CSS classes.
  • Added random background rendering.
  • Added fade and overlay effects.