QuickBooksHelpIntuit

Add a Background Image to a Custom HTML Template

by Intuit• Updated 2 months ago

The information in this article applies to the classic 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 a Landing Page or Email 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.

Click Content, then click Email templates.
Click Create Template.
Click the Code your own tab, and select Paste in code.

In the Code Editor, insert the following code just after the opening <body> tag to add the placeholder background image and color.

<div style="background-color:#7bceeb;">
<!--[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.

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.

Insert the following code just before the closing <body> tag.

</td>
</tr>
 </table>
 <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</div>

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.
Click Save.

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.

Mailchimp

Sign in now for personalized help

See articles customized for your product and join our large community of QuickBooks users.