---
title: Background
description: "The Background field adds Elementor's background control to a custom widget built with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors pick a solid color, an image or a gradient in the Elementor panel, and the styles go to the element your…"
url: "https://master-addons.com/docs/widget-builder/background/"
updated: "2026-09-17"
category: Widget Builder
---

# Background

The Background field adds Elementor's background control to a custom widget built with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors pick a solid color, an image or a gradient in the Elementor panel, and the styles go to the element your CSS selector points at. It suits banners, cards and any box whose background should change from page to page.

Background is a Pro field. The free plugin includes a limited Widget Builder, and the full set of fields comes with [Master Addons Pro](https://master-addons.com/pricing/).

![Promo banner widget built with the Widget Builder Background field shown with a fallback color, a classic color, a classic image and a gradient](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085211/widget-builder-01-background-field-banner-states.webp)

## What the Background field does

- It adds Elementor's Background Type control to your widget's Style tab, with one icon per background type you allow.
- Classic gives a color and an image, with position, attachment, repeat and size settings once an image is chosen.
- Gradient gives two colors with their locations, a linear or radial type, and an angle or position.
- Elementor writes the CSS itself to the element in the Selector option. You don't need a token in your HTML or CSS.

If you haven't built a widget yet, read the [Widget Builder overview](https://master-addons.com/docs/widget-builder/widget-builder-settings/) first.

## Before you start

- WordPress with Elementor installed and active.
- Master Addons for Elementor and Master Addons Pro, both active. The [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/) covers setup.
- A widget open in the Widget Builder. The example in this guide is a "Promo Banner" widget whose outer box has the class `promo-banner`.

## How to add a Background field

1. Go to **Master Addons > Widget Builder** and open your widget.
2. Click the **Style** tab and add a section, for example "Banner Background".
3. Type `background` in the field search box on the left.
4. Drag **Background** into the section. Its settings open in the left sidebar, and the section preview shows the type icons.

![Background field found by searching background in the Master Addons Widget Builder and added to a Style tab section](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085215/widget-builder-02-background-field-widget-builder.webp)

## Background field options explained

![Background field Label, Name, Types set to Classic and Gradient, Includes and Excludes options in the Widget Builder](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085218/widget-builder-03-background-field-types-options.webp)

- **Label** names the field in the builder, for example "Banner Background". In Elementor, editors see the section title and a control called Background Type.
- **Name** is the field's unique ID. Letters, numbers and underscores only.
- **Description** is a note for you inside the builder.
- **Types** sets which background types editors can pick: Classic, Gradient, Video and Slideshow. A new field shows Classic and Gradient.
- **Includes** and **Excludes** are meant to add or hide single settings inside the control. In our tests neither changed the Elementor panel. Excludes shows Image by default, yet the Image setting still appeared, so leave both as they are.

Keep Types to Classic and Gradient. Video and Slideshow add their settings to the panel, but when we tested them on a custom widget, a video link and a slideshow gallery drew nothing behind the banner. Elementor only builds the extra markup those two types need for its own sections and containers.

Scroll to the bottom of the sidebar for the Selector. The common settings above it (Show Label, Separator, [Conditions](https://master-addons.com/docs/widget-builder/conditions/) and the rest) work as they do on other fields.

![Background field Selector option set to .promo-banner in the Widget Builder](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085222/widget-builder-04-background-field-selector.webp)

## Set the Selector

The Selector tells Elementor which element gets the background. For the banner it is the class on the outer box:

```
.promo-banner
```

You don't have to type `{{WRAPPER}}` for this field. The builder adds it in front of your selector, so `.promo-banner` becomes `{{WRAPPER}} .promo-banner` and only affects this widget. With a comma-separated list, each part gets its own `{{WRAPPER}}`. If the Selector is empty, the background goes on the widget's outer wrapper instead of your element.

Give the element a fallback background in the CSS tab. It shows until an editor picks something, and the control's styles replace it after that:

```
.promo-banner {
  background-color: #1f1147;
  color: #ffffff;
}
```

![Widget CSS tab with a fallback background-color on the promo-banner class](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085225/widget-builder-05-background-fallback-css.webp)

Click **Save Settings** when you're done.

## Use the Background control in Elementor

Add the widget to a page, or reload the editor if the page was already open. Select the widget and open the **Style** tab. Your section shows Background Type with an icon for each type you allowed. The banner keeps its fallback color until you pick one.

![Background Type control with Classic and Gradient icons in the Elementor Style tab before a background is chosen](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085228/widget-builder-06-background-type-control-elementor.webp)

Click the brush icon for **Classic** and choose a **Color**. The banner updates straight away.

![Classic background color set on a custom widget banner in the Elementor Style tab](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085232/widget-builder-07-background-classic-color-elementor.webp)

Under the color, click the **Image** box to choose an image from the Media Library. More settings appear once an image is set: Image Resolution, Position, Attachment, Repeat and Display Size. Center Center, No-repeat and Cover work well for most banners.

![Classic background image with position, attachment, repeat and display size settings in Elementor](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085236/widget-builder-08-background-classic-image-elementor.webp)

Click the second icon for **Gradient**. Set the first **Color** and its **Location**, the **Second Color** and its location, then pick **Linear** with an **Angle** or **Radial** with a position.

![Gradient background with two colors, locations, type and angle settings in Elementor](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17085241/widget-builder-09-background-gradient-elementor.webp)

## Common use cases

- Hero and promo banners that get a new image or gradient for each campaign.
- Cards in pricing tables, team grids and feature lists.
- Call-to-action strips that switch between a brand color and a photo.
- An inner panel or overlay layer, by pointing the Selector at that element instead of the outer box.

## Tips for working with the Background field

- Always keep a fallback `background-color` in the CSS tab. It covers new widgets and the moment before an image loads.
- Keep text readable on photos. The example banner adds a dark layer with `.promo-banner::before` and `isolation: isolate` on the box, so white text stays legible on bright images.
- Point the Selector at one element. Several Background fields on different selectors are easier for editors than one field shared by many parts.
- Stick to Classic and Gradient in Types for custom widgets.
- For a single flat color with no image or gradient, the [Color field](https://master-addons.com/docs/widget-builder/color/) is simpler for editors.

## Frequently Asked Questions

   Is the Background field free?

No. Background is one of the Pro fields in the Widget Builder, so Master Addons Pro has to be active before you can add it to a widget.

 Do I need to add {{WRAPPER}} to the Background selector?

No. The builder adds `{{WRAPPER}}` in front of the Background field's selector for you, so `.promo-banner` is enough. Typing it yourself also works.

 Where is the background token for my CSS?

There isn't one to use. Background covers many CSS properties at once, so Elementor writes the rules to the Selector for you.

 Why doesn't the Video or Slideshow background show?

Those types need extra markup that Elementor only adds to its own sections and containers. On a custom widget their settings appear, but nothing is drawn. Use Classic or Gradient.

 Why is my fallback color gone after picking a gradient?

A gradient sets the background color to transparent and paints the gradient on top. Your fallback comes back if the editor switches the background type off.

## Wrapping up

Add the Background field to a Style section, keep Types to Classic and Gradient, and set the Selector to the element that should change. Put a fallback color in the CSS tab and editors can take it from there. For the rest of the element's styling, see the [Border](https://master-addons.com/docs/widget-builder/border/) and [Box Shadow](https://master-addons.com/docs/widget-builder/box-shadow/) fields, and check [pricing](https://master-addons.com/pricing/) for what each plan includes.