Badsender

Background images in email: I have the ultimate power!

  • updated on 

Background images in an email are a pain. You know it. Their technical implementation is a pain for any emailing integrator. With each implementation, it seems that their interpretation is always different, that nothing works anymore. Why is this? It's time to take the time to look into it, just a little, and it doesn't matter how long it takes because the subject is more than important. And if it is more than important, then time will wait. (Raymond Devos! And yeah, I'm proud!).

Case study

Let's take a very simple case, basic as Mr. Orel would say: I create a table 600 pixels wide, with a cell inside 400 pixels high, and text inside.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td bgcolor="#7bceeb" width="600" height="400" style="width:600px; height:400px; vertical-align:top;" valign="top"><p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p></td>
  </tr>
</table>
</body>
</html>

So far, so good. This cell, I want to put a background image behind my text. The image is as follows:

Background image

We don't care about the graphics here, okay? I prefer to tell you right now, you can't tell me like this "Yesiii but it's not very nice what you're doing here, with this text in white above a low quality image..." Balek! What matters is that the technique works. So, in principle, if I want to put this background image on my cell, I apply the corresponding CSS properties or HTML attributes, namely the HTML attribute background (followed by the url of the image)and/or the CSS background-image property or the CSS background property (always with the path of the image filled in). This should give us this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" bgcolor="#7bceeb" width="600" height="400" style="width:600px; height:400px; background:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg') no-repeat top center; background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg'); background-position:top center; background-repeat:no-repeat; vertical-align:top;" valign="top"><p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p></td>
  </tr>
</table>
</body>
</html>

However, the tests are not conclusive on Outlook 2007/2010/2013/2016/2019 on Windows. No real surprise, since we know in principle that you have to use the VML language for a background image to work on these versions of the e-mail program.

The VML

So let's go directly to the platform backgrounds.cm developed by Campaign Monitor. So I fill in the path of my background image, my backup background color, and I apply this background image to a single cell in a table. The code generated is the following:

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" color="#7bceeb"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">content</td></tr></table></div>

This gives, applied to my starting code, the following HTML code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" bgcolor="#7bceeb" width="600" height="400" valign="top" style="background:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg') no-repeat top center; background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg'); background-position:top center; background-repeat:no-repeat; width:600px; height:400px; vertical-align:top;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="tile" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      
      <div>
        <p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p>
      </div>
      
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>
</body>
</html>

Bad news, if we stop at that, the expected result is not correct. There are background image repetition concerns on Outlook 2007/2010/2013/2016/2019 on Windows and a surprising result on Outlook 2013 120 DPI on Windows. So first I'm going to solve this background image repetition problem by changing the type attribute of my included in the VML code provided by background.cm. From "tile", it changes to "frame". So here is the new code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" bgcolor="#7bceeb" width="600" height="400" valign="top" style="background:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg') no-repeat top center; background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg'); background-position:top center; background-repeat:no-repeat; width:600px; height:400px; vertical-align:top;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="frame" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      
      <div>
        <p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p>
      </div>
      
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>
</body>
</html>

Good news, this first problem of repeating the background image is now resolved. However, on Outlook 2013 120 DPI on Windows, there is still this strange rendering. I then apply another small hack specific to 120 DPI. The :

Need help?

Reading content isn't everything. The best way is to talk to us.


<html>

becomes :

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">

and I just added, just before closing my tag, the following Outlook-specific code:


 
  
  96

From now on, my finalized code will be the following:

<!DOCTYPE HTML>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" bgcolor="#7bceeb" width="600" height="400" valign="top" style="background:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg') no-repeat top center; background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg'); background-position:top center; background-repeat:no-repeat; width:600px; height:400px; vertical-align:top;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="frame" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      
      <div>
        <p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p>
      </div>
      
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>
</body>
</html>

Victory.

My tests are finally conclusive. However, let's go a step further If I want to add internal margins (padding) to my content, I run into a new problem. So let's consider the following code:

<!DOCTYPE HTML>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" bgcolor="#7bceeb" width="600" height="400" valign="top" style="background:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg') no-repeat top center; background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg'); background-position:top center; background-repeat:no-repeat; width:600px; height:400px; vertical-align:top;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="frame" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      
      <div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center">
          <tr>
            <td style="padding:10px;" bgcolor="#FF0000" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center">
                <tr>
                  <td style="padding:10px;" bgcolor="#00FF00"><p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p></td>
                </tr>
              </table></td>
          </tr>
        </table>
      </div>
      
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>
</body>
</html>

In concrete terms, I add an internal margin of 10 pixels at the top, right, bottom and left of my cell and I apply a background color to this same cell (a bright red). Then, I insert a table in this cell, and I place my starting text in it. The cell containing this text also has an internal margin of 10 pixels, but I apply a different background color (an atrocious green). The idea is to simulate the complexity of nested tables. And I notice that the internal margins on the right and left of my cells are not respected on Outlook 2013/2016/2019 on Windows.

Unfortunately, going through the cellpadding attribute to try to solve the problem does not work anymore. It only remains for me then, although the method is not very orthodox, to simulate internal right and left margins via empty cells. I don't particularly like this technique, but it is still the safest way to ensure that internal margins are present on cells inside a VML background image code. Here is the final code:

<!DOCTYPE HTML>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px; margin:0px auto;" align="center">
  <tr>
    <td background="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" bgcolor="#7bceeb" width="600" height="400" valign="top" style="background:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg') no-repeat top center; background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg'); background-position:top center; background-repeat:no-repeat; width:600px; height:400px; vertical-align:top;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="frame" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      
      <div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center" bgcolor="#FF0000">
          <tr>
            <td style="line-height:1px; font-size:1px; width:10px;" width="10">&nbsp;</td>
            <td align="center" style="padding:10px 0;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center" bgcolor="#00FF00">
                <tr>
                  <td style="line-height:1px; font-size:1px; width:10px;" width="10">&nbsp;</td>
                  <td style="padding:10px 0;"><p style="text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; line-height:140%; margin:0px; padding:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget euismod ex. Morbi eu vehicula tortor. In bibendum sagittis convallis. Duis imperdiet eget metus eu ullamcorper. Nunc vehicula vehicula diam ut vehicula. Curabitur tempor nisl ligula, a feugiat justo congue id.</p></td>
                  <td style="line-height:1px; font-size:1px; width:10px;" width="10">&nbsp;</td>
                </tr>
              </table></td>
            <td style="line-height:1px; font-size:1px; width:10px;" width="10">&nbsp;</td>
          </tr>
        </table>
      </div>
      
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>
</body>
</html>

PS: If all this seems simple and natural to you, you should know that it is not the same for everyone. This information can be gleaned from various forums, comments and blogs. This was the opportunity for me to review the subject and to settle the problem once and for all. So that you never have to struggle with your background images on Outlook again. It has gone on too long. Let justice be done. I ask Microsoft for the sum of 1 billion euros for moral prejudice. I think I'm entitled to it.

Soft kisses!

Support the "Email Expiration Date" initiative

Brevo and Cofidis financially support the project. Join the movement and together, let's make the email industry take responsibility for the climate emergency.

I want to know more
Share
The author
Picture of Thomas Defossez
Thomas Defossez
Thomas started his career as an emailing integrator at Experian before creating his own web agency. Today, Thomas decided to focus on email in order to be a specialist in HTML integration of this medium. Since the end of 2014, Thomas has been collaborating on various projects for the Badsender.com Agency.
All publications

6 réponses

  1. Hello
    I tried your technique because I was experiencing the problem of repeating image on Outlook. However, changing it to frame doesn't work for me!!! Or it doesn't work anymore.
    Is there another technique now?
    Thank you for your help

  2. hello,
    Today it is the opposite, it is preferable to pass the "frame" in "tile" otherwise your background image is slightly stretched on the height (and it distorts the whole height of its content)
    so that the background does not repeat itself, it is enough to add a "background-repeat:no-repeat;" in the styles of the <v:rect
    and make sure that the textbox is like this
    (adding mso style in this textbox generates a vertical repeat of the image)

  4. I do not know why but the story is reversed, since January 2020 it is necessary to use the <v:fill type="frame", the tyle does not work anymore as I said above...

    so either it's a story of image size, or outlook made a maj
    in any case for any problem of shifted or repeated images, it is necessary to test with type="frame" or "tile

  5. Thank you for this explanation which was exactly what I was looking for.

  6. Oh my god I love you, 2 days that the outlook 120 dpis make me struggle I would have never thought to modify the html tag a big thank you!

Laisser un commentaire

Your email address will not be published. Les champs obligatoires sont indiqués avec *