The Background field adds Elementor’s background control to a custom widget built with the Master Addons 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.
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 first.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor and Master Addons Pro, both active. The installation guide 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 #
- Go to Master Addons > Widget Builder and open your widget.
- Click the Style tab and add a section, for example “Banner Background”.
- Type
backgroundin the field search box on the left. - Drag Background into the section. Its settings open in the left sidebar, and the section preview shows the type icons.
Background field options explained #
- 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 and the rest) work as they do on other fields.
Set the Selector #
The Selector tells Elementor which element gets the background. For the banner it is the class on the outer box:
.promo-bannerYou 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;
}
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.
Click the brush icon for Classic and choose a Color. The banner updates straight away.
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.
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.
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-colorin 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::beforeandisolation: isolateon 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 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 and Box Shadow fields, and check pricing for what each plan includes.
