web-dev-qa-db-fra.com

Les images d'arrière-plan ne fonctionnent pas dans Outlook 2007 et versions ultérieures

J'ai créé un modèle de courrier électronique HTML qui fonctionne correctement dans la plupart des lecteurs de messagerie, mais les images d'arrière-plan ne sont pas affichées dans Outlook 2007, 2010 et 2013. Comment puis-je résoudre le problème?

Voici le code HTML pour l'e-mail:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

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

     <style type="text/css">

         * {
             padding: 0px;
             margin: 0px;
             border: 0px;
             outline: 0px;

           }

         .ExternalClass {width:100%;} 
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 

         body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} 
         body {margin:0; padding:0;} 
         table td {border-collapse:collapse;}   

         img {max-width:100%;}      

     </style>
 </head>

 <body>

     <table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
         <tr>
             <td>

                 <table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
                     <tr>
                          <td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
                     </tr>
                     <tr>
                         <td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">

                          <img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>

                         </td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">[email protected]!</span></td>
                     </tr>
                 </table>

             </td>
         </tr>
         <tr>
             <td>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
                     <tr>
                         <td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
                     </tr>
                  </table>
             </td>
         </tr>
        </table>
     </body>
  </html>
outlookbackground-imagehtml-emailoutlook-2007
15
Joy_S

Prise en charge du lecteur de courrier électronique pour les images d'arrière-plan

Outlook 2007 et versions ultérieures ne prennent en charge que deux manières d’afficher une image bg:

  • Utilisation de l'attribut HTML background sur la balise body
  • Utilisation du style d'image d'arrière-plan intégré sur la balise body

Dans les deux cas, Outlook redimensionne l'image différemment des autres lecteurs de courrier électronique et il n'y a aucun moyen d'empêcher l'image bg de se superposer.

Donc, à toutes fins pratiques, les images d'arrière-plan ne sont pas une option pour prendre en charge un large éventail de lecteurs de courrier électronique. Au lieu de cela, vous devrez vous contenter des images au premier plan (balises img).

La superposition d'éléments n'est pas une option

Outlook 2007+, Gmail, Hotmail et Yahoo Mail ne prennent pas en charge le positionnement CSS. Par conséquent, il est impossible de placer un élément de texte au-dessus d'une image au premier plan.

Lorsque vous découpez le courrier électronique en différentes zones (généralement à l'aide de tableaux HTML), chaque zone peut être un élément de texte ou une image au premier plan. Mais vous ne pouvez pas avoir les deux dans la même zone (c'est-à-dire, vous ne pouvez pas avoir deux éléments occupant le même espace ou se chevauchant).

Solutions

Pour les zones où il y a une image sans texte, cette partie de l'e-mail peut être coupée en tant qu'image de premier plan séparée.

Pour les zones où il y a une image avec du texte dessus, il y a 3 options:

  1. Couper le texte dans le cadre de l'image. Cela nuit à la convivialité du courrier électronique, ce qui est particulièrement problématique pour les utilisateurs dont les images sont désactivées par défaut (car ils ne verront pas le texte initialement).
  2. Affichez l'image en tant qu'image d'arrière-plan, en sachant que les utilisateurs d'Outlook 2007+ ne verront pas l'image (dégradation progressive).
  3. N'essayez pas d'afficher l'image de fond dans un lecteur de courrier électronique.

Avec modération, l'option n ° 1 est généralement sûre et raisonnable. Mais lorsqu'il est utilisé de manière intensive, il en résulte un rapport images/texte très élevé dans le courrier électronique, ce qui peut déclencher certains filtres anti-spam. Avant de faire un usage intensif de l'option n ° 1, testez l'e-mail avec différents filtres anti-spam. 

Avant de passer aux options n ° 2 ou n ° 3, vous devrez peut-être les effacer avec les concepteurs (car l'une ou l'autre compromettrait la conception dans Outlook 2007+). Dans l’ensemble, les images d’arrière-plan doivent être utilisées avec parcimonie lors de la conception des courriers électroniques. Il peut être utile d'indiquer aux concepteurs l'impact de l'utilisation d'images d'arrière-plan.

21
Matt Coughlin

Outlook ne prend en charge que les images d’arrière-plan dans la balise body, sauf si vous utilisez VML. Vérifiez ceci pour VML: http://backgrounds.cm/

Voici un exemple de celui-ci fonctionnant dans la balise body.

10
John

Je pense que vous trouverez cela très pratique: http://www.campaignmonitor.com/css/

Outlook 2007-13 ne prend pas en charge la propriété background-image, il n'y a donc aucun moyen de résoudre ce problème.

Sur la base de l'expérience personnelle: Afin de créer l'expérience la plus cohérente possible sur tous les clients de messagerie, je voudrais repenser le courrier électronique pour qu'il ne nécessite pas d'image de fond.

4
BjornJohnson

background-image n'est pas pris en charge dans Outlook ou Gmail sur Android 2.3. Voir: http://www.campaignmonitor.com/css/

J'utilise habituellement background-color comme solution de secours ou, si l'image d'arrière-plan est nécessaire, crée une partie texte de l'image. 

3
samanthasquared

Vous pouvez le faire en utilisant le bon VML. Le codepiece ci-dessous fonctionne le mieux pour moi:

<table>
<tr>
<td background="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" width="300" height="300">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-Microsoft-com:vml" 
    style='width:300px;height:300px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
    src="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" />
<![endif]-->
<p>Put the rest of your content here</p>
</td>
</tr>
</table>
2
Peter

L’image d’arrière-plan ne sera pas prise en charge dans Outlook 2007 + Utilisez VML (Le format VML (Vector Markup Language) est un format de fichier basé sur XML destiné aux graphiques vectoriels à deux dimensions.) Pour obtenir de l’assistance. 

   <div>
     <!--[if gte mso 9]>
     <v:background xmlns:v="urn:schemas-Microsoft-com:vml" fill="t">
      <v:fill type="tile" src="pink_bkg.png.png" color="#fff"/>
     </v:background>
     <![endif]-->
     <table>
       <tr>
         <td>
         </td>
       </tr>
      </table>
   </div>

Lien d'aide: http://backgrounds.cm/

Spécifique à Outlook /* Votre CSS spécifique à Outlook va ici. * /

«mso 9» désigne Office 2000 Outlook 2000 - Version 9 Outlook 2002 - Version 10 Outlook 2003 - Version 11 Outlook 2007 - Version 12 Outlook 2010 - Version 14 Outlook 2013 - Version 15 http://templates.mailchimp.com/development/css/Outlook-conditional-css/

2
Prasanth

Nous pouvons ajouter de cette façon: -

Ajoutez ce qui suit juste après la balise d'ouverture…

<table cellpadding="0" cellspacing="0" border="0" height="92" width="100%">
  <tr>
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-Microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:92px;">
        <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>

… Et ceci juste avant la balise de fermeture.

      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>
1
Deepak Kumar

Octobre 2018 - Testé dans Outlook 2016

Je pensais jouer avec l'extrait de code VML qui a fonctionné pour moi. Extrait de https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16

<! — [if gte mso 9]>
<v:image xmlns:v=”urn:schemas-Microsoft-com:vml” style=”width:525pt; height:348.75pt;” src=”image.jpg" /> 
<v:rect xmlns:v=”urn:schemas-Microsoft-com:vml” fill=”false” stroke=”false” style=”position: relative; width:525pt; height: 161.25pt; top: 187.5pt;”>
    <v:textbox inset=”0,0,0,0"> 
<![endif] 

<!-- Content -->

<!--[if gte mso 9]>   
    </v:textbox>
</v:rect>
<![endif]-->

D'autres extraits VML ont fonctionné dans une certaine mesure, mais j'ai eu des problèmes avec la disparition de l'image après avoir laissé le courrier électronique et son retour, ou le chargement impossible jusqu'à ce que l'utilisateur clique sur l'arrière-plan.

0
Gabe