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.
Thats cool but can you insert a repeating pattern?
Since the hack uses VML to work I am betting there is a way to fill using an image. Try here.
http://www.w3.org/TR/NOTE-VML
Thank you so much for this!! This method also works if your background is not showing up in the Gmail webmail interface. I was going nuts because my newsletter looked fine everywhere else, including on my gmail iphone app– but it was unreadable due to the dark background color (sans my background image) that was showing up on the computer in the gmail webmail program on safari and firefox on my mac and on our PC. But this did the trick and fixed it. Thanks again for posting this.
thank you!
This is exactly what I’m looking for, however I’m having some trouble making this work. I got step 3 down, but was a little confused on step 4 with what needs commenting out, and where does step 5 go? and what else do you change in that code other than the image url? Please help!