---
title: "How to Create a Multi Layer Elementor Background?"
url: https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/
date: 2025-01-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A background made of several layers, for example a photo, moving particles and a colour overlay, gives a section depth without extra widgets on top of your content. The Row..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Create-a-Multi-Layer-Elementor-Background_-1024x536.jpg
word_count: 806
---

# How to Create a Multi Layer Elementor Background?

## 

- Row Background de The Plus Addons for Elementor Pro apila hasta 3 capas de fondo, Deep, Middle y Top, detrás del contenido de un container o section.
- Deep Layer ofrece opciones como Solid Color, Gradient Color, Creative Background Image, Creative Background Video y Carousel Background, además de efectos como Magic Scroll, Ken-Burns y parallax.
- Middle Layer incluye Canvas Effect con partículas animadas Style 1 a Style 8 o JSON propio, Modern Mouse Hover Parallax, Auto Moving Layer y Multi Layer Parallax.
- Top Layer funciona como overlay y usa color con transparencia o Texture Image con Opacity de 0 a 1, mientras Overflow Hidden Section recorta lo que sobresale en la página publicada.

A background made of several layers, for example a photo, moving particles and a colour overlay, gives a section depth without extra widgets on top of your content.

The **Row Background** widget from The Plus Addons for Elementor stacks up to three background layers (Deep, Middle and Top) behind the content of a container or section.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/section-background/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=2uIMQCIfjlM

## Activate the Row Background Widget

- Go to **The Plus Addons > Widgets** in your WordPress dashboard.- Find **Row Background** (it carries a PRO badge) and turn on its toggle.

![The Plus Addons Widgets page with the Row Background toggle](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-activate-1024x485.png)

With only the free plugin active, Row Background shows in the Elementor panel as a locked tile. Clicking it opens an upgrade message, and a page that was built with the widget shows no background until Pro is active again.

## How the Widget Works

- Add the **Row Background** widget anywhere inside the container or section that should get the background.- Choose a layer type in **Content > Deep Layer**, **Middle Layer** and/or **Top Layer**. You can use one layer or all three.- Publish and view the page. The widget itself takes no space: its layers fill the whole container, behind the other widgets.

## Deep Layer

The Deep Layer is the bottom layer. Pick a type from its **Select Option** dropdown.

![The Deep Layer Select Option dropdown of the Row Background widget with a background image on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-deep-layer.webp)

| Option | What it creates |
| ------ | --------------- |
| **Solid Color** | One colour, with an optional **Border Radius**. |
| **Gradient Color** | A linear or radial gradient. [Guide](https://theplusaddons.com/docs/add-gradient-background-in-elementor/) |
| **Animated Background Color** | A background that fades through several colours. [Guide](https://theplusaddons.com/docs/add-an-animated-color-background-in-elementor/) |
| **Creative Background Image** | An image with optional auto-moving, mouse tilt, scroll parallax, Magic Scroll or Ken-Burns effects. [Guide](https://theplusaddons.com/docs/add-a-parallax-background-in-elementor/) |
| **Creative Background Video** | A self-hosted, YouTube or Vimeo video. [Guide](https://theplusaddons.com/docs/create-an-elementor-video-background/) |
| **Creative Background Gallery** | A slideshow of images. [Guide](https://theplusaddons.com/docs/create-an-elementor-background-slideshow/) |
| **Image Segmentation** | An image or colour split into segments that animate on hover. [Guide](https://theplusaddons.com/docs/create-a-segmented-background-in-elementor/) |
| **Gradient Animate Color** | A moving multi-colour gradient. [Guide](https://theplusaddons.com/docs/add-an-animated-gradient-background-in-elementor/) |
| **On Scroll Background Animation** | A page background that changes colour or image as visitors scroll. [Guide](https://theplusaddons.com/docs/change-background-on-scroll-in-elementor/) |
| **Carousel Background** | A background that changes with the slides of a carousel, tabs or accordion. [Guide](https://theplusaddons.com/docs/change-carousel-background-on-slide-change-in-elementor/) |

![Choosing a Deep Layer option in the Row Background widget](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-deep-layer.gif)

## Middle Layer

The Middle Layer sits above the Deep Layer. Its **Select Option** dropdown has six entries.

![The Middle Layer Select Option set to Canvas Effect with particles on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-middle-layer.webp)

| Option | What it creates |
| ------ | --------------- |
| **Canvas Effect** | Animated particles (Style 1 to Style 8 or your own particles JSON). [Guide](https://theplusaddons.com/docs/add-an-elementor-particle-background/) |
| **Modern Mouse Hover Parallax** | Images placed on the background that shift as the mouse moves. |
| **Auto Moving Layer** | Images that scroll on their own in a chosen direction. [Guide](https://theplusaddons.com/docs/add-a-moving-image-background-in-elementor/) |
| **Modern Image Effect** | Images with Pulse, Floating, Tossing or Rotating animation and optional Magic Scroll. [Guide](https://theplusaddons.com/docs/add-background-image-scrolling-effect-in-elementor/) |
| **Multi Layer Parallax** | Full-size image layers that move with Magic Scroll. |
| **Animated SVG (Coming Soon)** | Not available yet; selecting it adds nothing. |

![Setting up a Middle Layer effect in the Row Background widget](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-middle-layer.gif)

## Top Layer

The Top Layer covers the other two layers, so it works as an overlay. Use a colour with transparency, or lower the texture opacity, so the layers below stay visible.

![The Top Layer Select Option set to Solid Color over a background image](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-top-layer.webp)

| Option | Settings |
| ------ | -------- |
| **Solid Color** | **Overlay Color** |
| **Gradient Color** | **Color 1**, **Color 2**, their locations, **Gradient Style**, **Gradient Angle** or **Position** |
| **Texture Image** | **Texture Image** (repeated) and **Opacity** (0 to 1, default 0.8). [Guide](https://theplusaddons.com/docs/create-an-elementor-background-overlay/) |

![Choosing a Top Layer overlay in the Row Background widget](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-top-layer.gif)

## Extra

Turn on **Overflow Hidden Section** to clip anything that sticks out of the container, such as moving or parallax images. It only applies on the published page; the editor keeps showing the normal layout.

![The Overflow Hidden Section switch in the Extra section of the Row Background widget](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-extra-overflow.webp)

## How It Behaves

- On the page, the layers are moved into the container that holds the widget and fill it completely. This also works in a classic section and in an inner container (the background then fills only that inner container).- The layers are drawn in order: Deep Layer at the bottom, then Middle Layer, then Top Layer. Your widgets stay above all three.- Settings you leave on **Select option** add nothing, so you can use any single layer on its own.

![Published container with a background image, particles and a dark overlay made with the three layers](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-result-three-layers.webp)

## Limitations

- Row Background needs The Plus Addons for Elementor Pro. It is not part of the free plugin.- Use one Row Background widget per container. With two in the same container, only the layers of the last one were kept in our test. Put all layers in one widget instead.- **Animated SVG (Coming Soon)** can be selected but does nothing yet.

## Troubleshooting

### The background does not show on the page

Check that The Plus Addons for Elementor Pro is active and that Row Background is switched on under **The Plus Addons > Widgets**. Also check that the widget sits inside the container you want to style.

### Only one of my backgrounds appears

You probably have two Row Background widgets in the same container. Remove one and set the layers in the remaining widget.

## Related Docs

- [Add a parallax background](https://theplusaddons.com/docs/add-a-parallax-background-in-elementor/)- [Create a video background](https://theplusaddons.com/docs/create-an-elementor-video-background/)- [Change the background on scroll](https://theplusaddons.com/docs/change-background-on-scroll-in-elementor/)- [Create a background overlay](https://theplusaddons.com/docs/create-an-elementor-background-overlay/)

## Frequently Asked Questions

**Q: What do I need before creating a multi layer Elementor background?**
A: The Row Background widget is part of The Plus Addons for Elementor Pro, so the Pro version has to be active before it will work. The widget is placed inside the container or classic section that should receive the background, and it fills that container instead of adding its own visible space. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH this is the key setup detail that makes the layers behave like a true section background.

**Q: Why is my background not showing on the page?**
A: The usual cause is that The Plus Addons for Elementor Pro is not active or Row Background is switched off under The Plus Addons > Widgets. Another common miss is placing the widget outside the container you want to style. The widget only paints the container it sits in, so if it is not inside that section or container, nothing appears on the published page.

**Q: Can I use Row Background inside an inner container or classic section?**
A: The Row Background widget works in both a classic section and an inner container. In an inner container, the background fills only that inner container, not the full outer section. That matters when you want depth in one part of a layout without affecting everything around it. The layers are moved into the container that holds the widget and fill it completely.

**Q: What is the best way to avoid only one background showing?**
A: Use one Row Background widget per container. The page notes that when two are placed in the same container, only the layers from the last one were kept in testing. If you want Deep Layer, Middle Layer, and Top Layer together, keep them inside a single widget so all three stack in order instead of overwriting each other.

**Q: How many background layers can I stack with this widget?**
A: The Row Background widget stacks up to three layers: Deep Layer, Middle Layer, and Top Layer. Deep Layer sits at the bottom, Middle Layer goes above it, and Top Layer acts like an overlay on top of both. That order matters because your content stays above all three layers while the backgrounds fill the whole container behind it.

**Q: How do I keep moving or parallax backgrounds from spilling outside the section?**
A: Overflow Hidden Section is the control to use when animated images or parallax effects stick out of the container. Turning it on clips anything that extends beyond the section edge on the published page. One gotcha is that the editor still shows the normal layout, so clipping only becomes visible after publish.