Badsender

Les images de fond dans l’email : J’ai le pouvoir suprême !

  • , mis à jour le 

Restez informé·e via les newsletters de Badsender

Chaque mois, nous publions une newsletter sur l’email marketing et une infolettre sur la sobriété et le marketing. En savoir plus.

Votre adresse email ne sera jamais communiquée à un tiers. Vous pourrez vous désabonner à tout moment en un seul clic.

Les images de fond dans un email sont une plaie. Vous le savez. Leur mise en place technique est une souffrance pour tout intégrateur emailing. On a l’impression à chaque implémentation que leur interprétation est toujours différente, que plus rien ne fonctionne. Pourquoi ? Il est temps de prendre le temps de s’y attarder, un tant soit peu, et qu’importe le temps que cela nous prendra puisque le sujet est plus qu’important. Et si il est plus qu’important, alors le temps attendra. (Raymond Devos! Et ouais, j’suis pas peu fier!).

Cas pratique

Prenons un cas de figure on ne peut plus simple, basique comme dirait Monsieur Orel : je crée un tableau de 600 pixels de large, avec une cellule à l’intérieur de 400 pixels de haut, et du texte dedans.

<!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>

Jusque là, tout va bien. Cette cellule, je veux lui mettre une image de fond, derrière mon texte donc. Cette image est la suivante :

Image de fond

Le graphisme, on s’en cogne ici, ok ? Je préfère vous le dire tout de suite, vous pourrez pas me dire comme ça « Ouiiii mais c’est pas très beau ce que tu fais là, avec ce texte en blanc au-dessus d’une image peu qualitatiiive… » Balek ! Ce qui compte, c’est que la technique fonctionne. Donc, en principe, si je veux mettre cette image de fond sur ma cellule, j’applique les propriétés CSS ou les attributs HTML correspondants, à savoir l’attribut HTML background (suivi de l’url de l’image), et/ou la propriété CSS background-image ou la propriété CSS background (toujours avec le chemin de l’image renseigné). Ce qui devrait donc nous donner ceci:

<!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>

Cependant, les tests ne sont pas concluants sur Outlook 2007/2010/2013/2016/2019 sur Windows. Pas vraiment de surprise, puisqu’on sait en principe qu’il faut utiliser le langage VML pour qu’une image de fond fonctionne sur ces versions du logiciel de messagerie.

Le VML

Passons donc directement par la plateforme backgrounds.cm développée par Campaign Monitor. Je renseigne donc le chemin de mon image de fond, ma couleur de fond de secours, et j’applique cette image de fond à une cellule unique dans un tableau. Le code alors généré est le suivant:

<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">contenu</td></tr></table></div>

Ce qui donne, appliqué à mon code de départ, le code HTML qui suit:

<!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>

Mauvaise nouvelle, si l’on s’arrête à cela, le résultat escompté n’est pas correct. Il y a des soucis de répétition de l’image de fond sur Outlook 2007/2010/2013/2016/2019 sur Windows et un étonnant résultat sur Outlook 2013 120 DPI sur Windows. Je vais donc d’abord résoudre ce problème de répétition de l’image de fond en modifiant l’attribut type de mon <v:fill> compris dans le code VML fournit par background.cm. De « tile », il passe à « frame ». Voici donc le nouveau 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>

Bonne nouvelle, ce premier souci de répétition de l’image de fond est désormais résolu. Cependant, sur Outlook 2013 120 DPI sur Windows, il subsiste toujours cet étrange rendu. J’applique alors un autre petit hack propre au 120 DPI. La balise :

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.


<html>

devient :

<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">

et je viens ajouter, juste avant la fermeture de ma balise <head>, le code spécifique à Outlook suivant :

<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

Dorénavant, mon code finalisé sera donc le suivant:

<!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>

Victoire.

Mes tests sont enfin concluants. Cependant, allons un peu plus loin : si je souhaite ajouter des marges internes (padding) à mon contenu, je me heurte à une nouvelle problématique. Considérons donc le code suivant :

<!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>

Concrètement, je viens ajouter une marge interne de 10 pixels en haut, à droite, en bas et à gauche à ma cellule et j’applique à cette même cellule une couleur de fond (un rouge criard). Ensuite, j’insère un tableau dans cette cellule, et j’y place mon texte de départ. La cellule comprenant ce texte a elle-aussi une marge interne de 10 pixels, mais je lui applique une autre couleur de fond (un vert atroce). L’idée est de simuler la complexité des tableaux imbriqués. Et je constate que les marges internes à droite et à gauche de mes cellules ne sont pas respectées sur Outlook 2013/2016/2019 sur Windows.

Malheureusement, le fait de passer par l’attribut cellpadding pour essayer de résoudre le souci ne fonctionne pas plus. Il ne me reste alors, bien que la méthode ne soit pas très orthodoxe, à simuler des marges internes à droite et à gauche via des cellules vides. Je n’aime pas spécialement cette technique, mais c’est encore le moyen le plus sûr pour s’assurer de la bonne présence des marges internes sur des cellules comprises à l’intérieur d’un code VML pour image de fond. Voici le code final :

<!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 : Si tout cela vous semble simple et inné, sachez qu’il n’en est pas de même pour tout le monde. Ces informations sont à glaner à droite à gauche, au travers de différents forums, commentaires, blogs. C’était l’occasion pour moi de faire un point sur le sujet et de régler une bonne fois pour toute la problématique. Pour que, plus jamais, vous n’ayez à galérer avec vos images de fond sur Outlook. Ça n’a que trop duré. Que justice soit rendue. Je demande d’ailleurs à Microsoft la somme d’1 Milliard d’euros pour préjudice morale. Je pense y avoir le droit.

Bisous tout doux !

Soutenez l'initiative "Email Expiration Date"

Brevo et Cofidis soutiennent financièrement le projet. Rejoignez le mouvement et ensemble, responsabilisons l’industrie de l’email face à l’urgence climatique.

Je me renseigne
Partagez
L’auteur
Image de Thomas Defossez
Thomas Defossez
Thomas a démarré sa carrière en tant qu'intégrateur emailing chez Experian avant de créer sa propre agence web. Aujourd’hui, Thomas a décidé de se focaliser sur l’email afin d’être un spécialiste de l’intégration HTML de ce médium. Depuis fin 2014, Thomas collabore à divers projets de l'Agence Badsender.com.
Toutes les publications

6 réponses

  1. Bonjour
    J’ai tenté ta technique car je rencontrais le problème de répétition d image sur Outlook. Cependant, le fait de changer elle en frame ne fonctionne pas pour moi !!! Ou bien ça fonctionne plus.
    Y a t il une autre technique désormais ?
    Merci pour ton aide

  2. hello,
    Aujourd’hui c’est le contraire, il est preferable de passer le « frame » en « tile » sinon votre image en background est legerement etiré sur la hauteur (et cela fausse toute la hauteur de son contenu)
    pour que le background ne se repete pas il suffit d’ajouter un « background-repeat:no-repeat; » dans les styles du <v:rect
    et s'assurer que que textbox soit comme ceci
    (l’ajout de style mso dans ce textbox genere un repeat verticale de l’image)

  3. « et s’assurer que que textbox soit comme dans l’article ci dessus »

  4. je ne sais pas pourquoi mais l’histoire s’inverse, depuis janvier 2020 il faut bien utiliser le <v:fill type="frame", le tyle ne fonctionne plus comme je dit plus haut…

    donc soit c'est une histoire de taille d'image, soit outlook a fait un maj
    en tout cas pour tout probleme d'images décallé ou répété, il faut tester avec type="frame" ou "tile"

  5. Merci pour cette explication qui correspondait exactement à ce que je recherchais.

  6. Oh my god je vous aimes, 2 jours que les outlook 120 dpis me font galérer je n’aurais jamais penser à modifier la balise html un grand merci !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *