Add a Background Image to an Email or Landing Page

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 background images to emails and landing pages.

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 entire emails, while the classic builder works for email sections and landing pages.
• Mailchimp’s email templates are 600-660 pixels wide, so it’s best to use images with a range of 660-1320 pixels. 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.

About background images

Background images can be used to create a repeating background pattern, or to display a full image behind your content. Here are your options for background images.

• In the new builder, add a background image to the entire email.
• In the classic builder, add a background image to the header, body, and footer sections of an email. To add a background image to the entire email in the classic builder, use a custom HTML email template.
• In the classic builder, add a background image to the entire landing page, or to the header, body, details, and footer sections.

Background images in emails

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, we recommend that 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-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.

Add a background image to an entire 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. Click the Styles tab in the new builder.
   
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 added to the background of the entire email.

Add a background image to email sections or landing pages in the classic builder

Background images can be added to email sections in the classic builder. Use the new builder or a custom HTML email template to apply a background image to the entire email.

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

1. Click the Style tab in the classic builder.
   
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.
   
4. Click Edit to style and make changes to the image in the photo editor.
   
5. When you’re done making changes in the photo editor, click Save to return to the classic builder.
6. Click the Size drop-down 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.
7. Click the Position drop-down and choose to align your image with the Top, Center, or Bottom of the section.
8. Click the Repeat drop-down 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.
9. Choose a Fallback color to display in clients that don't support background images. Be sure to choose a color that will display your text properly.
10. 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 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 in a content block.
• Add padding to the top and bottom of each section to control the position of the content block.
• By default, the Repeat drop-down menu is set to None, which is best for larger images. If you have a smaller image and want to create a patterned effect, choose Horizontal, Vertical, or Both.

Test email background images

We always recommend that you preview emails you create in Mailchimp and test your design. Background images aren't supported by all email clients, so it's important to send a few test emails to yourself. To see how a wide variety of email clients will display your background image, use our Inbox Preview tool.