How To Add A Background Image In Mailchimp

Add a Groundwork Epitome to a Custom HTML Template

This folio is now available in other languages.

To farther heighten the blueprint of your marketing campaigns, yous tin can add a background image to a Code your ain template in Mailchimp's Template Builder.

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

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

Before you lot start

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

Background images may not render in every email client, then brand sure you know which email clients back up background images past reviewing our Email Client CSS Back up article for details.
Large images tin cause campaigns to display incorrectly in your recipients' inboxes. For all-time results, set up the resolution to 920 x 1080px or less, and compress the image.
Host your images on a public server or employ a free service like Imgur or Flickr, and apply an absolute file path that points directly to the file location in the code. Be aware that if you host your ain images on a individual server, recipients without admission to the server won't be able to run across the image.
Mailchimp can besides host your images for yous in the content studio if they are less than 10MB.
You can likewise add a background epitome to a regular campaign. To learn more, have a look at our Add together a Background Image to a Entrada article.

Add together a background epitome to your custom HTML template

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

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

1. Click Campaigns.
Click E-mail templates.
Click Create Template.
Click the Lawmaking your own tab, and select Paste in code.

In the Code Editor, insert the post-obit code only afterward the opening <trunk> tag to add the placeholder groundwork image and color.

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

This code displays placeholder epitome URLs and colors. You'll replace these with your prototype and color information in the next footstep.

Replace the two placeholder background paradigm URLs and placeholder groundwork color values in this lawmaking example with the colour hex code of your choice and the accented file path for your paradigm URL.

Insert the post-obit lawmaking just earlier the closing <body> tag.

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

Supervene upon or edit the remaining entrada code with your own custom HTML.
When y'all're done editing the code, click Save.
Click Save and Go out.
In the Salve Template pop-up modal, proper noun your template.
Click Save.

You can admission your new template in the campaign architect or on the Templates page.

Testing and troubleshooting

Earlier you send your e-mail campaign, thoroughly preview and test your template and send a few test emails to yourself. To run into how certain electronic mail clients will display your groundwork image, use the Inbox Preview tool.

Preview and Test Your Email Campaign
Test with Inbox Preview

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

The background prototype will not brandish if images are turned off in your recipient'south inbox. For this reason, be sure you lot choose a background colour that will display your text properly if the background prototype doesn't load.
When editing your CSS, make certain you don't take any other background properties in your code, because they tin override the background paradigm.
When working in the Template Editor, merge tags will non render in previews or examination emails. If you want to see how merge tags will render for contacts, create a entrada from the template, and apply our preview and examination options.