---
title: Theme Settings — Overlay tab
description: "## Overview ![file 4HU5If4m0W](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c37c8632c7d3a31944fe818/file-4HU5If4m0W.png) *Figure 1 (above). View of the Overlay option settings for the Default Theme.* The *Overlay* option tab controls the styling of the popup overlay layer. This layer covers the entire screen and surrounds the popup container. ( [It's actually…"
url: "https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-overlay-tab/"
updated: "2024-12-23"
category: Using Popup Maker / Theming Popups
---

# Theme Settings — Overlay tab

## Overview

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

*Figure 1 (above). View of the Overlay option settings for the Default Theme.*

The *Overlay* option tab controls the styling of the popup overlay layer. This layer covers the entire screen and surrounds the popup container. ( [It's actually a layer that's positioned between the screen content and the popup.](https://wppopupmaker.com/docs/theming-popups/popups-display-in-front-of-screen-content/) ). The *Overlay* option has two properties; *color* and *opacity*.

### Property Descriptions

- *Color* styles the color of the overlay layer. 
- *Opacity* styles the density of the applied color.  An opacity of 100% is a fully saturated color, while a value of 0% is fully transparent. 

## The Overlay Theme Settings in Action

![file 8n8GwON2kJ](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/58ab61a92c7d3a576d3557f3/file-8n8GwON2kJ.jpg)

The overlay layer can be used to limit visitor access to the page content, and focus visitor attention on the popup itself.  The example above uses a semi-transparent red overlay that draws attention to the popup contents.  

> For those that prefer  *not to display the overlay layer,* see the following related article.
>
>
>
> **Related article:** ['Display - Advanced' option settings](https://docs.wppopupmaker.com/article/354-popup-settings-box-display-advanced-option-settings)

## Overlay Option Settings

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

### Color

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

Set the background color for the popup overlay layer. Click on the button labeled *'Select Color'* to display a colorpicker. Each custom color targeted within the colorpicker is represented by a unique hex number. 

The overlay 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. 

**Table 1. Overlay Layer Background Color -- Default Settings by Theme**

| ***Theme Name*** | ***Default Color ( name / hex number )*** |
| --- | --- |
| *Default Theme* | *white / #ffffff* |
| *Light Box* | black / #000000 |
| *Enterprise Blue* | black / #000000 |
| *Hello Box* | black / #000000 |
| *Cutting Edge* | black / #000000 |
| *Framed Border* | white / #ffffff |

### Opacity

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

*Range: 0 - 100%. * Set the color opacity (density) of the overlay layer.  

Edit the opacity value either by:

1. moving the range slider horizontally; or
2. changing the percent value directly, or 
3. selecting the '- / +' buttons to increment changes to percentage.

**Table 2. Overlay Background Opacity -- Default Settings by Theme**

| ***Theme Name*** | ***Default Opacity ( percentage )*** |
| --- | --- |
| *Default Theme* | 100 |
| *Light Box* | 60 |
| *Enterprise Blue* | 70 |
| *Hello Box* | 75 |
| *Cutting Edge* | 50 |
| *Framed Border* | 50 |

## Replace the Overlay Color with a Custom Image

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

The overlay 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 1-year.  Licensees are eligible to receive support and upgrades during the license term.