How Zombieland helped solve email background rendering issues
My background is that of a graphic designer for both web and print, where the use of background images is pretty standard fare, and simple to do. When I first started working with email, I was provided a list of ‘rules’ by the existing developer that stated what the limitations of designing and building emails were. One of the things that I noticed on the list was that the use of background images in email was a definite “No no”. I questioned this as I was pretty sure I had received an email with background images before, and was told that “it is possible, but the support for background images is limited, so it’s best not to use them at all.”.
Not knowing too much about the limitations of email as a platform, as I was still learning the ropes, I went along with this for a little while until I found my feet. I have since found 2 methods which I utilise every day that allow for cross-client support for background images. The results from Litmus show 100% support for background image rendering with these methods (besides plain text emails of course), so I thought that I would share these with you.
Double Tap! Ever seen the movie Zombieland with Jesse Eisenberg, Emma Stone, Woody Harrelson and Bill Murray? One of the first rules (#2 to be precise, just behind Cardio) mentioned when attempting to disable a zombie, shoot it twice, in the head, to absolutely make sure that it is dead. This is effectively what you have to do with background images. Rule #2 double tap To make sure that your background image renders across all email clients you need to include the background as a “background” attribute on your outer 100% width table, as well as use the “background-image” CSS attribute in your styles.
Example: This is your “Double Tap!”. Use only one, and you will encounter issues in multiple email clients. Use both and your background image rendering issues will be neutralised.
Bulletproof Backgrounds. The 2nd method is known as the ‘Bulletproof background’ and was created by a developer called Stig, who can be found on Twitter, @stigm. This method allows you to not only include a main background image on your email, but also make any image throughout your email a background image. This is especially handy for creating call to action buttons with actual text rather than just an image, having a banner image with actual text overlayed and more. To do this, simply go to www.emailbg.net and follow the on screen instructions.
Again, this ‘Bulletproof background’ method utilises the “Double Tap!” method by including the HTML background attribute on anywhere you wish the background image to appear, and also doubling up the image by using code known as VML to enable the background image to render on the oft-troublesome Outlook 2007 & 2010 email clients.
Warning: As far as I am aware, there is no known method for having a main background image that does not tile. So please be aware that if you are using a large non-repeatable image, make sure that it is large enough to not tile and look bad.
Remember, whichever of the methods that you use, much like extinguishing a pesky zombie, you need to “Double Tap!”, or it may come back to bite you.