---
title: Theme Settings — Container tab / Background category
description: "## Overview ![file bcF9V4UMrs](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c3a98892c7d3a31944ff63e/file-bcF9V4UMrs.png) *Figure 1 (above). View of the **Container >> Background **option settings for the Default Theme.* The *Container*option tab controls the styling for the popup container.  This article addresses the *Background* category which includes the *color* and *opacity** *properties of the…"
url: "https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-container-tab-background-category/"
updated: "2024-12-23"
category: Using Popup Maker / Theming Popups
---

# Theme Settings — Container tab / Background category

## Overview

![file bcF9V4UMrs](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c3a98892c7d3a31944ff63e/file-bcF9V4UMrs.png)

*Figure 1 (above). View of the **Container >> Background **option settings for the Default Theme.*

The *Container*option tab controls the styling for the popup container.  This article addresses the *Background* category which includes the *color* and *opacity** *properties of the container itself.

### Property Descriptions

- *Color* styles the background color *inside* the popup container. 
- *Opacity* styles the density of the applied background color.  An opacity of 100% is a fully saturated color, while a value of 0% is fully transparent.  *Default (all themes): 100%. *

###

## Property Default Values for Each Popup Theme

*Range: various.*  Sets the background color for the popup container. Click on the  *Select Color *button to display a colorpicker. Each custom color targeted within the colorpicker is represented by a unique hex number ( a six-digit number preceded by the '#' sign). 

The background color field also accepts any specific hex number as input. This feature assists users who want to apply a custom color palette on a site. Click on the  *Default* button to reset the container background color of the container to the plugin default. 

**Table 1. Container Background Color -- Default Settings by Theme**

| ***Popup  Theme *** | ***Default Color ( name / hex number )*** |
| --- | --- |
| *Default Theme* | *off-white / *#f9f9f9 |
| *Light Box* | white / *#ffffff* |
| *Enterprise Blue* | white /  *#ffffff* |
| *Hello Box* | white / #ffffff |
| *Cutting Edge* | blue / #1e73be |
| *Framed Border* | light-yellow / #fffbef |

###

## Container Option Settings

### How to Edit Settings

1. Move the slider horizontally; or
2. Change the pixel value directly, or 
3. Select the '- / +' buttons to increment changes to pixels.

### Preview Changes in the Theme Customizer

When editing the *Container* option styles, use the customizer located to the right of the *Theme Settings* box to preview your changes. 

### Select Update to Save Changes

Select the  *Update* button to save any changes to popup theme settings. Otherwise, any changes will be lost after you leave the page. 

## Replace the Container Background Color with a Custom Image

![file rhy6CjzXPY](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c3a7f3e04286304a71e26dc/file-rhy6CjzXPY.png)

The container background color can be replaced with a custom background image using the [Advanced Theme Builder extension to Popup Maker](https://wppopupmaker.com/extensions/advanced-theme-builder/?utm_source=plugin-theme-editor&utm_medium=text-link&utm_campaign=Upsell&utm_content=overlay-settings).  The plugin requires a paid license which is valid for a term of one year.  Licensees are eligible to receive support and upgrades during the license term.