There’s a deeply rooted misunderstanding among e-mail marketing folks that background images don’t work in e-mails and, therefore, can’t be used to illustrate or beautiful creations.

In fact, if we inspect today’s available HTML and CSS attributes in major e-mail clients and providers, we’d think we’ve taken a lift with Marty McFly and brought back to the remote year of 2001 in which websites were built using just tables and sliced images.

I don’t wanna point fingers but there’s a certain company which brags itself about pushing the web forward that still has an email client which don’t support media queries in the year 2015. Yes, big G, I’m talking to you. *wink wink*

Nevertheless, we’ve got the web on our side and it shows us that there’s a way for everything, even if it’s not a fancy one.

Limitations with email background images

We need to know that there’s some gotchas when to work with images in emails with no surprises.

First of all, the background image have to be set in a particular <table> or <td> element. Then you need to pick an image which primary content is in the upper left area of the picture.

The reason why is that you cannot change the background position using the CSS property like we’re used to do in the web. Email clients just don’t like that. Period. Few ones do have better support but in general images will always be aligned to its upper left corner — live with that, okay?

Moving on, the background will repeat both in the x and y-axis. Yep, you can’t change that too. So, it’s a good idea to if the table cell — or table — have the exact same width and height of the image if you don’t want it to be cropped our inadvertently repeated.

Now take a deep breath and let this stuff sink into your brain.

Okay, going forward, we got another thing to decide, which email clients are we targeting? If your answer is “every one but Outlook and Windows Mail” then your life had just become 500% more simple, chap, ‘cuz the majority of the providers out there supports standard HTML attributes. High five!

In your email code, set the background and bgcolor attributes of the table cell to the image’s URL and a fallback color, respectively.

<table border="0" cellpadding="0" cellspacing="0" width="640">
  <tr>
    <td align="center" bgcolor="#bada55" background="path/to/file.jpg"
      style="background-color: #bada55; background-image: url(path/to/file.jpg);">

      <!– content goes here –>

    </td>
  </tr>
</table>

Important, note that in this example there’s the presence of the style attribute in which the values are also declared. This is for compatibility’s sake, mostly.

While some clients support the former declaration others support the latter. Campaign Monitor have a great page which lists in detail all the properties supported by every major email vendor.

Now you see… now you don’t

You might have asking yourself “how I deliver the same design for people who use arcane clients like Outlook, Windows Live Mail or, in reality, any of Microsoft’s software?”

The secret sauce: conditional comments and VML markup. Don’t know what a VML is? Yep, me neither.

“hey, if ur Outlook ’07 or newers pls read this code here otherwise just ignore it, kthxbye”

A conditional comment, as the name implies, is a special HTML comment created by Microsoft which let developers target some chunk of HTML to a given version of one of their apps, rendering engines, etc.

On the other hand VML is a XML-based format also developed by Microsoft for creating graphics in two dimensions. It was supposed to be what the SVG is today.

Both technologies are obsolete and aren’t available today in the most recent versions of Internet Explorer though they’re useful for us in this scenario.

<table border="0" cellpadding="0" cellspacing="0" width="640">
  <tr>
    <td align="center" bgcolor="#bada55" background="path/to/file.jpg"
      style="background-color: #bada55; background-image: url(path/to/file.jpg);">
      <!–[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
          stroke="false" style="width: 640px; height: 400px;">
        <v:fill type="tile" src="path/to/file.jpg" color="#bada55" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]–>

      <!– content goes here –>

      <!–[if gte mso 9]>
        </v:textbox>
        </v:rect>
      <![endif]–>
    </td>
  </tr>
</table>

Take a look, in line 4 we’ve got the [if gte mso 9] tag which tells us the code contained through the [endif] will be rendered if the condition inside the brackets is evaluated true.

Now, what the hell does gte mso 9 even mean? Chill up, I’ve got you:

• gte is short for greater than or equal
• mso stands for Microsoft Outlook
• and finally 9 is the internal code for Outlook ’07

Basically we’re telling the programme “hey, if ur Outlook ’07 or newers pls read this code here otherwise just ignore it, kthxbye”

Finally, we got to the code that really displays the background image. The important here is to tweak the src, color and style attributes to match the required values.

Once again we owe to the Campaign Monitor folks who have an amazing, bullet-proof background image generator for us to make use of. Guaranteed.

Results

After more than four dozen tests, corrections here it is, a sparkling wine bottle featured with the Eiffel tower in the background shown on Outlook ’13.

To the curious I suggest peeking in the source code for the example above.