Using MailChimp and background images in your table cells
So we designed a fantastic looking Email newsletter template which had very nice background images, and show up very nice on the web, and not at all in outlook 2007+ woops. We are all pretty familiar with the Microsoft blunder that replaced the rendering engine in Outlook from IE to … Word?! Thanks Microsoft, that was awesome. Of course we all use Word to view HTML…
Anyhoo MailChimp and many others simply outright deny that this is possible or simply state that “We don’t support or recommend this because it doesnt really work in Outlook”
Guess what? Some smarty pants figured out a really elegant way to make background images show up in Outlook. While this is technically a hack its the best I have seen and it will probably not get any better then this until Microsoft figures out that HTML should be rendered by HTML software not Word Processors.
Credit goes to this forum post I stumbled upon from Brian Thies.
Ok so while that example works great getting this working with MailChimp takes a few more steps.
Step 1. Export your beautifully created template that doesnt work in outlook from MailChimp to your Desktop
Step 2. Modify this template using your favorite HTML Code editor (notepad)
Step 3. Change the head tag and doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml">
Step 4. Comment out the following tag. Settign a background color or image on the table or cell breaks the vml background and your image will not show unless this is commented out.
@tab Body
@section body style
@tip Set the background color for your email’s body area.
*//*
#templateContainer,.bodyContent{
/*@editable*//*background-color:#FFFFFF;
}
/*
Step 5. Insert your background code using this amazing cool method, this an example cell
<td colspan="3" style="background-image:url(http://gallery.mailchimp.com
/1xxxx3wfwf3c/images/1.jpg);width:643px;height:172px;" valign
="top">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:
url(#default#VML); display:inline-block;width:643px;height:172px;
position:absolute;top:0;left:0;border:0;z-index:-1;' src="
http://gallery.mailchimp.com/1xxxx3wfwf3c/images/1.jpg" />
<![endif]-->
</td>
Step 6. Import your template back into MailChimp from Dashboard > My Templates
Step 7. Go back to your campaign and change your template to your newly fixed imported Template of Master D00m awesome.
