How To Add Background To Html

Add a Background Image to a Custom HTML Template

This page is now available in other languages.

To further enhance the design of your marketing campaigns, you 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 hire a Mailchimp Skillful if you need help.

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

Before you commencement

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

Background images may not render in every email client, then make sure you know which email clients back up background images by reviewing our E-mail Client CSS Support article for details.
Large images can crusade campaigns to brandish incorrectly in your recipients' inboxes. For best results, ready 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 lawmaking. Be enlightened that if yous host your own images on a individual server, recipients without admission to the server won't be able to see the image.
Mailchimp can besides host your images for y'all in the content studio if they are less than 10MB.
You lot tin can too add a background image to a regular campaign. To learn more, take a expect at our Add together a Groundwork Image to a Campaign article.

Add together a background image to your custom HTML template

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

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

1. Click Campaigns.
Click Email templates.
Click Create Template.
Click the Lawmaking your ain tab, and select Paste in lawmaking.

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

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

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

Replace the two placeholder background image URLs and placeholder groundwork 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 endmost <body> tag.

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

Replace or edit the remaining campaign lawmaking with your own custom HTML.
When you're done editing the lawmaking, click Save.
Click Relieve and Exit.
In the Salve Template pop-upwards modal, name your template.
Click Salve.

Y'all can access your new template in the entrada builder or on the Templates page.

Testing and troubleshooting

Earlier you ship your email campaign, thoroughly preview and test your template and send a few examination emails to yourself. To see how certain email clients volition 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 epitome will not display if images are turned off in your recipient's inbox. For this reason, be certain you choose a background color that will display your text properly if the background image doesn't load.
When editing your CSS, make sure yous don't take whatsoever other background backdrop in your lawmaking, considering they tin override the groundwork paradigm.
When working in the Template Editor, merge tags volition non return in previews or test emails. If y'all want to run into how merge tags will render for contacts, create a entrada from the template, and employ our preview and examination options.