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.
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.
Replace or edit the remaining campaign code with your own custom HTML.
When you're done editing the code, click Save.
Click Save and Exit.
In the Save Template pop-up modal, name your template.
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.
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.
Have a question?
Paid users can log in to access email and chat support.