How to Darken the Background Image in a Campaign

What You'll Learn

A bright or busy background image can make your headline, form fields, and buttons hard to read. Darkening the image adds contrast so your content stands out.

There are two ways to do this:

• Option 1 (recommended): Darken the image before you upload it. This is the simplest approach and keeps your campaign free of extra elements.
• Option 2: Add a dark overlay with an HTML block. This is useful if you swap background images often and don't want to edit each one.

Option 1: Darken the Image Before You Upload It

Use any image editor (such as Photoshop, Canva, or Figma) to lower the image's brightness or add a dark layer on top of it. Export the result, then upload it as your page background.

For steps on setting a background image, see Changing a Page's Background Image.

Option 2: Add a Dark Overlay with an HTML Block

This method places a semi-transparent black block on top of your background image and behind the rest of your content.

1. Add a Blank HTML Element

1. Open the page you want to edit and select the HTML tab.
2. Click the + icon to add a new HTML block.
3. Delete any content in the Enter HTML box and leave it blank. You'll add the styling in the next step.

2. Add the Overlay Styling in Wrapper CSS

1. With the blank HTML block still selected, scroll down to Wrapper CSS and turn the toggle on.
2. Add the following CSS properties and values. Click the + icon to add each new row.

Here's what each property does:

• z-index: 0 keeps the overlay behind your text, form fields, and buttons.
• background-color: #00000080 is black at 50% opacity. The last two characters (80) control how dark the overlay is.
• width: 100% and height: 100% stretch the overlay to cover the whole page, so you don't need to resize it by hand.

3. Preview Your Campaign

Click Save Draft, then use Preview to check the result.

Adjust How Dark the Overlay Is

To make the overlay lighter or darker, change the last two characters of the background-color value:

You can also use the rgba format, where the last number is the opacity (0 to 1). For example, rgba(0, 0, 0, 0.5) is black at 50% opacity.

Things to Keep in Mind

• Each page has its own background. If other pages in your campaign (such as the Thank You page) also use a background image, add an overlay to those pages too. You can use Apply Design Settings To in the HTML block to copy the styling to another page.
• Check every screen size. If your campaign has a Mobile Optimized screen, preview it there as well. For more on screen sizes, see How to Use Screen Sizes to Design Responsive Desktop and Mobile Campaigns.