How To Add Background Images To HTML Emails

If you want to add background images to HTML emails, you have extra steps to take to make sure they work in popular email clients like Outlook and GMail. Even with the various Email Services like MailChimp, Campaign Monitor and Constant Contact, who help with automatic inlining of CSS styles, you will find adding background images to your HTML emails is another story…

Add Background Images to HTML Email

I was recently working on a new email template for a client that made use of background images on the headers for various sections. Without going in to a tutorial on writing and building a successful HTML email I want to just get to the code you need. HTML emails are built using a table-based layout (there are plenty of good resources online and SitePoint have a useful eBook). With a table-based layout for an email, you add your CSS inline on the tables, rows and cells. To show background images you could add the style=”background-image: url(path/to/image.jpg);” declaration but this seems to fall over if you want to apply it to individual table cells.

I found a useful post over at Campaign Monitor that helped with this, along with a link to an updated version of this and here is how I used the code in my template:

<td background=”images/s1-header-bg.gif” bgcolor=”#ffffff”valign=”top” style=”font-family: Verdana, sans-serif;”>
<!–[if gte mso 9]>
<v:rect xmlns:v=”urn:schemas-microsoft-com:vml” fill=”true” stroke=”false” style=”width:686px;height:71px;”>
<v:fill type=”tile” src=”images/s1-header-bg.gif” color=”#f79131″ />
<v:textbox inset=”0,0,0,0″>
<![endif]–>
<h1 style=”margin-top: 10px; margin-left:60px; line-height:1;”><singleline label=”Section Heading”>Section One</singleline></h1>
<!–[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]–>
</td>

A Brief Explanation

What you are doing is adding a filter to the code, that checks to see if the email is being rendered in Microsoft Outlook. If it is, a version of the Microsoft VML namespace is used to create a block that you specify a fill type, fallback colour and source image for.

This is working in GMail, Yahoo Mail etc and can be used for page backgrounds as well as table cells.

A good bit of news too for users of Campaign Monitor; it appears that they are working on a new Canvas app for their service. This will hopefully add features that MailChimp has in the editor that allow you to set/format headings within blocks of text, specify custom colour palettes and insert <hr> horizontal rules, along with custom styles to divide section.

Related posts:

NHS Providers HTML emails IOS 4.2.1 Push Email Deleting emails on the iPhone Add Links, Captions And Subscribe Buttons To YouTube Videos