Add a Background Image to a Landing Page or Email

Take your marketing to the next level and add a background image to your marketing email or landing page.

In this article, you'll learn how to add a background image.

Before you start

Here are some things to know before you begin this process.

• This article tells you how to add a background image in both our new builder and classic builder. The new builder works for emails, while the classic builder works for emails and landing pages. For more information on email builders, check out About Mailchimp’s Email Builders.
• Mailchimp’s email templates are 600 pixels wide, so it’s best to size your images with that maximum width in mind. Check out our image recommendations for image design tips.
• Because our drag-and-drop templates are mobile responsive, we recommend that you add a background image to a content section with a single column. Background images in multi-column content sections may appear distorted on mobile devices.
• This article uses a regular email campaign to show you how to add a background image. Some options may look a bit different depending on the type of campaign you're working with.

About background images

Background images can be used to create a repeating background pattern, or display a full image behind your campaign content. Mailchimp's new builder supports background images for the full email. The classic builder supports background images in the preheader, header, body, column, and footer sections of an email campaign, and in the page, header, body, and footer sections of a landing page campaign.

Outlook clients have limited support for background images in emails. Emails designed in the new builder are more likely to display background images in Outlook clients than emails designed in the classic builder. If you want a background image to display in Outlook for your email campaigns, we recommend you use a custom HTML template.

Background images on landing pages

Larger background images will look cleaner on larger screens, but we recommend keeping images between 1500 and 2500 pixels wide. The recommended image height depends on how much content you’ve got on your landing page, but it’s important to keep in mind that larger images can slow down your page.

If you're working with an email campaign or automation, take a look at this table to find out which email clients support background images.

Add and style a background image to an email in the new builder

Choose an image to display on the background of your entire email. If an email client doesn’t support background images, we’ll display a background color instead.

To add a background image to an email in the new builder, follow these steps.

1. In the new builder, click the Styles tab.
   
2. Click the Email drop-down.
3. In the Background Image section, drag and drop your background image, or click Browse to choose an image from the Content Studio.
4. After you add your background image, use the menu to choose its Size, Position, and whether you want it to Repeat.

Your image will be inserted to the background of the entire email.

Add a background image to an email or landing page in the classic builder

Background images can be added to the Page section of landing page campaigns, but not to the Page section of email campaigns in the classic builder. To add a background image to an email campaign, you'll need to use a custom HTML email template.

To add a background image to an email or landing page in the classic builder, follow these steps.

1. In the classic builder, click the Style tab.
   
2. Click the section you want to add a background image to.
3. Under Background, click Add an image instead to open the content studio. Upload a new image from your computer, choose an existing image from the content studio, or import an image from a web address.
   

Your image will be inserted in the section you chose. Read on to learn how to style a background image.

Style a background image in the classic builder

Customize the style and placement of your background image to ensure your campaign has the right look.

To style a background image in the classic builder, follow these steps.

1. In the email or landing page designer, click the Style tab.
   
2. Choose the section that contains your background image.
3. Under Background, click Edit to make changes to the image in the photo editor.
   
4. When you’ve finished making changes in the photo editor, click Save to return to your campaign.
5. Click the Size drop-down menu and choose how large you want your image to be.
   
   • Choose Auto to display the image at its actual size.
   • Choose Cover to fill the width of the entire section. This works best for larger images with centered content. The image may be cropped when viewed on different devices.
   • Choose Contain to scale the image to a size that fits the height inside its container, so the entire background image can be viewed on any device.
6. Click the Position drop-down menu and choose to align your image with the Top, Center, or Bottom of the section.
   
7. Click the Repeat drop-down menu and choose the repeating pattern of your image.
   
   • Choose None to have your image display only once.
   • Choose Horizontal to repeat the image from top to bottom.
   • Choose Vertical to repeat the image from left to right.
   • Choose Both to tile the image in both directions.
8. Choose a Fallback color to display in email clients that don't support background images. Be sure to choose a color that will display your text properly.
   
9. After you set your style preferences, click Save.

After you style your background image, you can add any drag-and-drop content block on top of the background image in your campaign layout. It's best to use clear, short, messages in sections with background images, like an image block that contains your logo, a text block that promotes your brand, or a button that links to your online store or website.

Style tips

• When in doubt, use a simple, centered image if you plan to overlay a content block.
• Padding can be added to the top and bottom of each campaign section. This allows you to control the position of your content block in the section.
• By default, the Repeat drop-down menu is set to None. This setting is best for larger images. If you have a smaller image and want to create a patterned effect, choose Horizontal, Vertical, or Both.

For more information on style options for different sections in a campaign, take a look at our View or Edit Section Design article.

Test background images

We always recommend you preview any campaign you create in Mailchimp.

If you're working with an email campaign, we also recommend you thoroughly test your design. Background images aren't supported by all email clients, so it's important to send a few test emails to yourself. Or, to see how a wide variety of email clients will display your background image, use our Inbox Preview tool.