it-swarm.com.de

Hintergrundbilder funktionieren nicht in Outlook 2007 und höher

Ich habe eine HTML-E-Mail-Vorlage erstellt, die in den meisten E-Mail-Lesegeräten einwandfrei funktioniert. In Outlook 2007, 2010 und 2013 werden jedoch keine Hintergrundbilder angezeigt.

Hier ist der HTML-Code für die 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>
15
Joy_S

E-Mail-Reader-Unterstützung für Hintergrundbilder

Outlook 2007 und höher unterstützt nur zwei Möglichkeiten, ein BG-Bild anzuzeigen:

  • Verwenden des HTML-Hintergrundattributs für das Body-Tag
  • Verwenden des Inline-Hintergrundbild-Stils für den Body-Tag

In beiden Fällen skaliert Outlook das Bild anders als andere E-Mail-Reader, und es gibt keine Möglichkeit, das Kacheln des bg-Bildes zu verhindern.

Für alle praktischen Zwecke sind Hintergrundbilder daher keine Option zur Unterstützung einer Vielzahl von E-Mail-Lesern. Stattdessen müssen Sie mit Vordergrundbildern (img-Tags) auskommen.

Das Überlagern von Elementen ist keine Option

Outlook 2007+, Gmail, Hotmail und Yahoo Mail unterstützen keine CSS-Positionierung. Daher ist es nicht möglich, ein Textelement auf einem Vordergrundbild zu platzieren.

Beim Aufteilen der E-Mail in verschiedene Bereiche (normalerweise unter Verwendung von HTML-Tabellen) kann jeder Bereich entweder ein Textelement oder ein Vordergrundbild sein. Sie können jedoch nicht beide im selben Bereich haben (d. H. Sie können nicht zwei Elemente haben, die den gleichen Platz einnehmen oder sich überlappen).

Lösungen

Für Bereiche, in denen sich ein Bild ohne Text befindet, kann dieser Teil der E-Mail als separates Vordergrundbild geschnitten werden.

Für Bereiche, in denen sich ein Bild mit Text befindet, gibt es drei Optionen:

  1. Schneiden Sie den Text als Teil des Bildes aus. Dies schadet der Verwendbarkeit der E-Mail und ist besonders problematisch für Benutzer, bei denen Bilder standardmäßig deaktiviert sind (da der Text anfangs nicht angezeigt wird).
  2. Zeigen Sie das Bild als Hintergrundbild an, mit dem Wissen, dass Benutzer von Outlook 2007+ das Bild nicht sehen (grazile Beeinträchtigung).
  3. Versuchen Sie nicht, das Hintergrundbild in einem E-Mail-Reader anzuzeigen.

In Maßen ist Option # 1 normalerweise sicher und vernünftig. Bei starker Verwendung führt dies jedoch zu einem sehr hohen Verhältnis von Bildern zu Text in der E-Mail, wodurch möglicherweise einige Spam-Filter ausgelöst werden. Bevor Sie Option 1 intensiv nutzen, testen Sie die E-Mail in einer Vielzahl von Spam-Filtern. 

Bevor Sie mit den Optionen Nr. 2 oder Nr. 3 fortfahren, müssen Sie dies möglicherweise mit den Designern löschen (da entweder das Design in Outlook 2007+ beeinträchtigt wird). Im Großen und Ganzen sollten Hintergrundbilder bei der Gestaltung von E-Mails sparsam eingesetzt werden. Es kann hilfreich sein, die Designer auf die Auswirkungen der Verwendung von Hintergrundbildern hinzuweisen.

21
Matt Coughlin

Outlook unterstützt nur Hintergrundbilder im Body-Tag, es sei denn, Sie verwenden VML. Überprüfen Sie dies für VML: http://backgrounds.cm/

Hier ist ein Beispiel davon im Body-Tag.

10
John

Ich denke, Sie werden das sehr praktisch finden: http://www.campaignmonitor.com/css/

In Outlook 2007-13 wird die Hintergrund-Image-Eigenschaft nicht unterstützt. Daher gibt es keine gute Lösung.

Basierend auf persönlichen Erfahrungen: Um die beständigste Erfahrung mit E-Mail-Clients zu erzielen, würde ich die E-Mail so umgestalten, dass kein Hintergrundbild erforderlich ist.

4
BjornJohnson

background-image wird in Outlook 2.3 oder Google Mail nicht unterstützt. Siehe: http://www.campaignmonitor.com/css/

Normalerweise verwende ich background-color als Fallback, oder wenn das Hintergrundbild erforderlich ist, machen Sie den Text als Teil des Bildes. 

3
samanthasquared

Sie können dies mit der richtigen VML tun. Das folgende Codepiece funktioniert am besten für mich:

<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

Das Hintergrundbild wird in Outlook 2007 + nicht unterstützt Verwenden Sie VML (Vector Markup Language (VML)) ist ein XML-basiertes Dateiformat für zweidimensionale Vektorgrafiken.), Um Unterstützung zu erhalten. 

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

Hilfe-Link: http://backgrounds.cm/

Outlook-spezifisch /* Ihr Outlook-spezifisches CSS geht hier. * /

"mso 9" ist 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

Wir können diesen Weg hinzufügen: -

Fügen Sie gleich nach dem Eröffnungs-Tag Folgendes hinzu:

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

… Und das direkt vor dem schließenden Tag.

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

Oktober 2018 - Getestet in Outlook 2016

Ich dachte mir, ich würde mit dem VML-Snippet, das für mich funktionierte, mitspielen. Entnommen aus 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]-->

Andere VML-Snippets funktionierten bis zu einem gewissen Grad. Ich hatte jedoch Probleme mit dem Verschwinden des Bildes, nachdem die E-Mail verlassen und zurückgegeben wurde oder nicht geladen wurde, bis der Hintergrund angeklickt wurde.

0
Gabe