How to Edit Background Animations on Elementor

intermediate 8 min read Updated 2026-03-24

Quick Answer

Elementor lacks built-in background animations; use custom CSS classes on sections/containers with gradient or image backgrounds and keyframes for effects like shifting colors or scrolling images. Add classes via Advanced tab, configure backgrounds in Style tab, and paste CSS in Custom CSS. Common setups take 15-45 minutes with troubleshooting for caching or selectors.

Get Elementor Deal → Partner

Try Elementor Full Elementor Review

Prerequisites

Elementor plugin installed (free version sufficient)
Seamless background image for loops (Photoshop offset tool recommended)
Basic CSS knowledge for pasting code
Optional: Elementor Pro for Custom CSS or child theme
Test on staging site for performance

Step-by-Step Instructions

Open Elementor Editor

Log into WordPress dashboard, go to Pages > Edit with Elementor for the page or Templates > Saved Templates to edit.

Select Target Section or Container

Click the six-dot handle of the section, column, or container (e.g., hero section) to animate. Left panel updates with editing options.

Use containers for flexible layouts in newer Elementor versions.

Configure Background in Style Tab

Switch to Style tab, under Background, click paintbrush for Background Type. For gradients: select Gradient, set Type (Linear/Radial), Direction (0°-360°), Colors (e.g., #FF0000 0%, #00FF00 50%), Opacity 80%. For images: Classic > Image, upload seamless image, Position Center Center, Attachment Fixed/Scroll, Size Cover. Use Hover tab for variants.

Assign CSS Class

Go to Advanced tab > CSS Classes. Enter unique name like bgloop (images) or bgcss (gradients), lowercase with hyphens, no spaces.

Copy-paste class names from tutorials to avoid errors.

Add Custom CSS for Gradient Animation

In Advanced > Custom CSS (Pro) or site-wide Appearance > Customize > Additional CSS. Paste for rotating gradient (20s cycle):

selector .bgcss {
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Adjust 20s for speed, 400% for intensity.

Limit to 2-4 colors for smooth playback.

Add Custom CSS for Image Loop (Left-to-Right)

Paste for 10s viewport-width loop:

selector .bgloop {
  animation: looping 10s infinite linear;
  background-size: 100vw auto;
}
@keyframes looping {
  to { background-position: 100vw 0 }
}

Use -100vw for right-to-left.

Ensure image is seamless; change <code>10s</code> for speed.

Add Custom CSS for Image Loop (Top-to-Bottom)

Paste for vertical scroll:

selector .bgloop {
  animation: looping 10s infinite linear;
  background-size: auto 100vh;
}
@keyframes looping {
  to { background-position: 0 100vh }
}

Ideal for patterns like falling elements.

Preview and Update

Click Preview or Update. Test on frontend; adjust keyframes if needed via browser dev tools.

Clear cache if animation doesn't appear.

Test Responsiveness

Check mobile/desktop with 100vw/100vh; add media queries in CSS for breakpoints if laggy.

Common Issues & Troubleshooting

Animation not visible or not playing

Verify exact CSS class (e.g., bgloop) matches selector; clear cache, test in incognito.

Choppy playback or mobile lag

Reduce colors/stops, use linear easing, limit background-size intensity; test with dev tools.

Non-seamless image breaks loop

Create seamless image via Photoshop offset tool; ensure Size: Cover, no-repeat.

CSS not applying (free version)

Use site-wide Additional CSS; upgrade to Pro for per-element Custom CSS.

Hover or direction issues

Add :hover rules; use negative values like -100vw to reverse direction.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.

Visit Elementor View Elementor Pricing