Add a Background Image to a Custom HTML Template

Copy Article URL

Copied

Note

The information in this article applies to the legacy builder only. To learn how to use the new builder, check out Design an Email with the New Builder.

To further enhance the design of your marketing campaigns, you can add a background image to a Code your own template in Mailchimp's Template Builder.

Custom HTML templates are an advanced feature and are recommended for users familiar with custom coding. Contact your developer, or hire a Mailchimp Expert if you need assistance.

In this article, you'll learn how to add a background image to your custom HTML template.

Before you start

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

  • Background images may not render in every email client, so make sure you know which email clients support background images by reviewing our Email Client CSS Support article for details.
  • Large images can cause campaigns to display incorrectly in your recipients' inboxes. For best results, set the resolution to 920 x 1080px or less, and compress the image.
  • Host your images on a public server or use a free service like Imgur or Flickr, and use an absolute file path that points directly to the file location in the code. Be aware that if you host your own images on a private server, recipients without access to the server won't be able to see the image.
  • Mailchimp can also host your images for you in the content studio if they are less than 10MB.
  • You can also add a background image to a regular campaign. To learn more, take a look at our Add a Background Image to an Email or Landing Page article.

Add a background image to your custom HTML template

This process uses CSS, HTML, and VML to display a background image and color. You'll paste our example code into your template and change the placeholder image and background color to your own specifications.

To add a background image to a custom HTML template, follow these steps.

  1. Click Campaigns on the navigation menu.
  2. From the Campaigns menu, click Email templates.
  3. Click Code your own, then click Continue.
  4. From the Code your own menu, click Import HTML.
  5. Click Add file to import your HTML, then you’ll navigate to the Preview and Test page
  6. To insert a background image, click Edit Design from the bottom task bar to load the Design menu. Your file should be under 15MB and should include one HTML file, plus supporting CSS and web-friendly image files.
  7. From the Design menu, select Body.
  8. Under Body Style, Background is listed, click Add an image instead.
  9. Then you’ll navigate to the Content Studio. You will have the option to upload an image or select an image from the Content Studio.

a. To upload an image, click Upload, browse your files to upload your image.

b. To select an image from the Content Studio, click Insert. 10. You’ll return back to the Preview and Test, preview your background image, then click Save.

```
"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="http://www.yoursite.com/yourimages/photo.jpg"color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
    <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
   <tr>
 <td valign="top" align="left" background="http://www.yoursite.com/yourimages/photo.jpg" style="background-repeat:no-repeat; background-size:cover;">
```

This code displays placeholder image URLs and colors. You'll replace these with your image and color information in the next step.
  1. Replace the two placeholder background image URLs and placeholder background color values in this code example with the color hex code of your choice and the absolute file path for your image URL.

  2. Insert the following code just before the closing tag.

    </tr> </table> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </div> 13. Use the Preview and Test drop-down to preview your template or send a test email.

    a. Click the Edit Design | Edit Code buttons to make changes.

    b. Click Content Studio to view designs. 14. Click Save and Exit, a modal will open to name your design, then click Save. 15. You’ll navigate to the Email Template page. Select your preferred template to Create email.

    a. Use More options menu to:

    • Edit template
    • SendMandrill
    • Replicate template
    • Share template
    • Export template
    • Rename template
    • Complete the email form, Add a Social Post to Your Email, then Preview your template and click Send.

You can access your new template in the campaign builder or on the Templates page

Testing and troubleshooting

Before you send your email campaign, thoroughly preview and test your template and send a few test emails to yourself. To see how certain email clients will display your background image, use the Inbox Preview tool.

Preview and Test Your Email Campaign Test with Inbox Preview

Here are a few other tips for working with background images.

  • The background image will not display if images are turned off in your recipient's inbox. For this reason, be sure you choose a background color that will display your text properly if the background image doesn't load.
  • When editing your CSS, make sure you don't have any other background properties in your code, because they can override the background image.
  • When working in the Template Editor, merge tags will not render in previews or test emails. If you want to see how merge tags will render for contacts, create a campaign from the template, and use our preview and test options.

Create a Regular Email

Learn how to create a regular email in Mailchimp.

Where to Edit Template Code

With Mailchimp's template language, you can code an email template right from your account. Learn how to add template images and find your template's HTML.

CSS in HTML Email

This article gives some basic tips on using CSS in HTML email.

About Template Images

Image limits vary based on your Mailchimp template. Get tips on working with images using different template options.

Add a Background Image to an Email or Landing Page

Add a background or hero image to your email or landing page. Get style tips to take your design to the next level.