Home > Programming > Using MailChimp and background images in your table cells

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.

About these ads
Categories: Programming
  1. iansterne
    September 23, 2011 at 3:36 pm | #1

    Thats cool but can you insert a repeating pattern?

  2. o0joecool0o
    September 23, 2011 at 5:12 pm | #2

    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

  3. Letty in Phoenix
    April 26, 2012 at 9:24 pm | #3

    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.

  4. October 9, 2012 at 3:11 pm | #4

    thank you!

  5. January 4, 2013 at 2:56 pm | #5

    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!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: