1. Zuhause
  2. Frage und Antwort
  3. E-Mail-Vorlage zeigt nicht das Hintergrundbild in Hotmail

E-Mail-Vorlage zeigt nicht das Hintergrundbild in Hotmail

2016-04-05 4 views
0

Ich habe gerade eine Newsletter-Vorlage in Magento für einen meiner Kunden erstellt. aber das Problem ist, es ist nicht die Hintergrund-Header-Bild in Hotmail Gmail Yahoo etc. Es zeigt sich einwandfrei in Testumgebung und in Webmail, aber nicht in jedem Outlook usw. Hier ist der Code für Sie alle. Können Sie mir bitte sagen, was ich falsch mache?E-Mail-Vorlage zeigt nicht das Hintergrundbild in Hotmail

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Newsletter</title> 
<style type="text/css"> 
body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
</style> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr> 
     <td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0"> 
     <tbody> 
      <tr> 
      <td height="90" align="center" valign="top" style="background-image:url(http:placehold.it/350x150.jpg); background-repeat:no-repeat; background-position:center top;"><table width="600" border="0" cellspacing="0" cellpadding="0"> 
       <tbody> 
       <tr> 
        <td width="300" height="90" align="left" valign="middle"><a href="http://www.mysite.co.uk"><img src="http://www.mysite.co.uknewsletter/logo.png" width="177" height="48" alt=""/></a></td> 
        <td width="300" height="90" align="right" valign="middle"><img src="http://www.mysite.co.uknewsletter/contact-us.png" width="146" height="47" alt=""/></td> 
       </tr> 
       </tbody> 
      </table></td> 
      </tr> 
      <tr> 
      <td height="35" align="left" valign="top" style="background-image:url(http://www.mysite.co.uknewsletter/menu_bg.jpg); background-repeat:repeat-x; background-position:center top;"> 
      <a href="https://www.smartteck.co.uk" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">Home</a> 
      <a href="http://www.mysite.co.ukpc-components.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">PC COMPONENTS</a> 
      <a href="http://www.mysite.co.ukdesktop-pc-s.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">DESKTOP PC’S</a> 
      <a href="http://www.mysite.co.uklaptops.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">LAPTOPS</a> 
      <a href="http://www.mysite.co.ukmonitor-tv-s.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">MONITOR & TV’S</a> 
      <a href="http://www.mysite.co.ukstorage.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">STORAGE</a> 
      <a href="http://www.mysite.co.ukgaming-gadgets.html" style="line-height:35px; padding:0px 8px; color:#FF0000; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">SALE</a> 

      </td> 
      </tr> 
      <tr> 
      {{inlinecss file="email-inline.css"}} 
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0"> 
<table cellpadding="0" cellspacing="0" border="0"> 
    </tr> 
    <tr> 
     <td> 
      <table cellpadding="0" cellspacing="0" border="0"> 
       <tr> 
        <td class="email-heading"> 
         <h1>Thank you for your order from {{var store.getFrontendName()}}.</h1> 
         <p>Once your package ships we will send an email with a link to track your order. Your order summary is below. Thank you again for your business.</p> 
        </td> 
        <td class="store-info"> 
         <h4>Order Questions?</h4> 
         <p> 
          {{depend store_phone}} 
          <b>Call Us:</b> 
          <a href="tel:{{var phone}}">{{var store_phone}}</a><br> 
          {{/depend}} 
          {{depend store_hours}} 
          <span class="no-link">{{var store_hours}}</span><br> 
          {{/depend}} 
          {{depend store_email}} 
          <b>Email:</b> <a href="mailto:{{var store_email}}">{{var store_email}}</a> 
          {{/depend}} 
         </p> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="order-details"> 
      <h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3> 
      <p>Placed on {{var order.getCreatedAtFormated('long')}}</p> 
     </td> 
    </tr> 
    <tr class="order-information"> 
     <td> 
      {{if order.getEmailCustomerNote()}} 
      <table cellspacing="0" cellpadding="0" class="message-container"> 
       <tr> 
        <td>{{var order.getEmailCustomerNote()}}</td> 
       </tr> 
      </table> 
      {{/if}} 
      {{layout handle="sales_email_order_items" order=$order}} 
      <table cellpadding="0" cellspacing="0" border="0"> 
       <tr> 
        <td class="address-details"> 
         <h6>Bill to:</h6> 
         <p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p> 
        </td> 
        {{depend order.getIsNotVirtual()}} 
        <td class="address-details"> 
         <h6>Ship to:</h6> 
         <p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p> 
        </td> 
        {{/depend}} 
       </tr> 
       <tr> 
        {{depend order.getIsNotVirtual()}} 
        <td class="method-info"> 
         <h6>Shipping method:</h6> 
         <p>{{var order.shipping_description}}</p> 
        </td> 
        {{/depend}} 
        <td class="method-info"> 
         <h6>Payment method:</h6> 
         {{var payment_html}} 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

<tr> 
      <td height="20" align="center" valign="top">&nbsp;</td> 
      </tr> 
      <tr> 
      <td height="56" align="center" valign="middle" bgcolor="#dcdcdc"> 
      <img src="http://www.mysite.co.uknewsletter/brand-1.jpg" width="110" height="35" alt=""/> 
      <img src="http://www.mysite.co.uknewsletter/brand-2.jpg" width="110" height="35" alt=""/> 
      <img src="http://www.mysite.co.uknewsletter/brand-3.jpg" width="110" height="35" alt=""/> 
      <img src="http://www.mysite.co.uknewsletter/brand-4.jpg" width="110" height="35" alt=""/> 
      <img src="http://www.mysite.co.uknewsletter/brand-5.jpg" width="110" height="35" alt=""/></td> 
      </tr> 
      <tr> 
      <td height="75" align="center" valign="middle"> 
      <a href="https://www.facebook.com/SmartTeckLtd"><img src="http://www.mysite.co.uknewsletter/facebook.jpg" width="31" height="31" alt=""/></a>&nbsp; 
      <a href="https://twitter.com/SmartTeck_Ltd"><img src="http://www.mysite.co.uknewsletter/twitter.jpg" width="31" height="31" alt=""/></a>&nbsp; 
      <a href="https://plus.google.com/+SmartteckUk/"><img src="http://www.mysite.co.uknewsletter/gplus.jpg" width="31" height="31" alt=""/></a>&nbsp; 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/pinterest.jpg" width="31" height="31" alt=""/></a>&nbsp; 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/youtube.jpg" width="31" height="31" alt=""/></a>&nbsp; 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/instagram.jpg" width="31" height="31" alt=""/></a>&nbsp; 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/linkedin.jpg" width="31" height="31" alt=""/></a></td> 
      </tr> 
      <tr> 
      <td height="33" align="center" valign="middle" bgcolor="#1696da" style="color:#FFFFFF; font-family:arial; font-size:12px;">&copy; Copyrights 2016 Smart Tech 786 Ltd, Registered Number 09713584.</td> 
      </tr> 
      <tr> 
      <td height="20" align="center" valign="top" style="line-height:40px; font-size:11px; font-family:arial;"> 
      </td> 
      </tr> 
     </tbody> 
     </table></td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Quelle

2016-04-05 shafiq

+0

das sind die probleme machen linie – shafiq

Antwort

0

E-Mail mit HTML kann sein ... schwierig, so verwenden die alte Markup Weise

<td height="90" align="center" background="myback.gif">...</td>

Exkurs

Sie auch einen Tippfehler haben, die das Problem für E-Mail beheben unterstützen Kunden CSS-Stile neue, in dem Sie die 2 nach vorne in Ihrer uRL aufgeschlitzt vergessen, so http:placehold... zu http://placehold...

style="background-image:url(http://placehold.it/350x150); ..."
ändern 210

Wenn Sie immer noch Probleme mit Inline-Stil haben, könnten Sie den Header-Hintergrund ändern mögen, wo Sie es aus dem td entfernen und in die Tabelle, wie diese

  <td height="90" align="center" valign="top">     
      <table width="600" border="0" cellspacing="0" cellpadding="0" background="http://placehold.it/350x150">

Quelle

2016-04-05 19:47:18 LGSon

+0

hi, ich habe diesen weg auch verwendet, aber es vermasselt mit ganzen schablonen. dies ist ein Teil, der Probleme verursacht "td height =" 90 "align =" zentrum "valign =" top "style =" background-image: url (http: placehold.it/350x150.jpg); Hintergrund-Wiederholung: keine Wiederholung; background-position: center top; "> – shafiq

+0

@shafiq Prüfe mein Update – LGSon

+0

@shafiq Hier ist auch eine alte Anleitung zum Tutorial: http://www.htmliseasy.com/table_tutor/background.html – LGSon

0

Versuchen einschließlich ein vollständige uRL in der CSS-

wie dies zum Beispiel: 

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Newsletter</title> 
 
<style type="text/css"> 
 
body { 
 
\t margin-left: 0px; 
 
\t margin-top: 0px; 
 
\t margin-right: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0"> 
 
     <tbody> 
 
      <tr> 
 
      <td height="90" align="center" valign="top" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150&fm=jpg); background-repeat:no-repeat; background-position:center top;"><table width="600" border="0" cellspacing="0" cellpadding="0"> 
 
       <tbody> 
 
       <tr> 
 
        <td width="300" height="90" align="left" valign="middle"><a href="http://www.mysite.co.uk"><img src="http://www.mysite.co.uknewsletter/logo.png" width="177" height="48" alt=""/></a></td> 
 
        <td width="300" height="90" align="right" valign="middle"><img src="http://www.mysite.co.uknewsletter/contact-us.png" width="146" height="47" alt=""/></td> 
 
       </tr> 
 
       </tbody> 
 
      </table></td> 
 
      </tr> 
 
      <tr> 
 
      <td height="35" align="left" valign="top" style="background-image:url(http://www.mysite.co.uknewsletter/menu_bg.jpg); background-repeat:repeat-x; background-position:center top;"> 
 
      <a href="https://www.smartteck.co.uk" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">Home</a> 
 
      <a href="http://www.mysite.co.ukpc-components.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">PC COMPONENTS</a> 
 
      <a href="http://www.mysite.co.ukdesktop-pc-s.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">DESKTOP PC’S</a> 
 
      <a href="http://www.mysite.co.uklaptops.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">LAPTOPS</a> 
 
      <a href="http://www.mysite.co.ukmonitor-tv-s.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">MONITOR & TV’S</a> 
 
      <a href="http://www.mysite.co.ukstorage.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">STORAGE</a> 
 
      <a href="http://www.mysite.co.ukgaming-gadgets.html" style="line-height:35px; padding:0px 8px; color:#FF0000; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">SALE</a> 
 
      
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      {{inlinecss file="email-inline.css"}} 
 
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0"> 
 
<table cellpadding="0" cellspacing="0" border="0"> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <table cellpadding="0" cellspacing="0" border="0"> 
 
       <tr> 
 
        <td class="email-heading"> 
 
         <h1>Thank you for your order from {{var store.getFrontendName()}}.</h1> 
 
         <p>Once your package ships we will send an email with a link to track your order. Your order summary is below. Thank you again for your business.</p> 
 
        </td> 
 
        <td class="store-info"> 
 
         <h4>Order Questions?</h4> 
 
         <p> 
 
          {{depend store_phone}} 
 
          <b>Call Us:</b> 
 
          <a href="tel:{{var phone}}">{{var store_phone}}</a><br> 
 
          {{/depend}} 
 
          {{depend store_hours}} 
 
          <span class="no-link">{{var store_hours}}</span><br> 
 
          {{/depend}} 
 
          {{depend store_email}} 
 
          <b>Email:</b> <a href="mailto:{{var store_email}}">{{var store_email}}</a> 
 
          {{/depend}} 
 
         </p> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="order-details"> 
 
      <h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3> 
 
      <p>Placed on {{var order.getCreatedAtFormated('long')}}</p> 
 
     </td> 
 
    </tr> 
 
    <tr class="order-information"> 
 
     <td> 
 
      {{if order.getEmailCustomerNote()}} 
 
      <table cellspacing="0" cellpadding="0" class="message-container"> 
 
       <tr> 
 
        <td>{{var order.getEmailCustomerNote()}}</td> 
 
       </tr> 
 
      </table> 
 
      {{/if}} 
 
      {{layout handle="sales_email_order_items" order=$order}} 
 
      <table cellpadding="0" cellspacing="0" border="0"> 
 
       <tr> 
 
        <td class="address-details"> 
 
         <h6>Bill to:</h6> 
 
         <p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p> 
 
        </td> 
 
        {{depend order.getIsNotVirtual()}} 
 
        <td class="address-details"> 
 
         <h6>Ship to:</h6> 
 
         <p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p> 
 
        </td> 
 
        {{/depend}} 
 
       </tr> 
 
       <tr> 
 
        {{depend order.getIsNotVirtual()}} 
 
        <td class="method-info"> 
 
         <h6>Shipping method:</h6> 
 
         <p>{{var order.shipping_description}}</p> 
 
        </td> 
 
        {{/depend}} 
 
        <td class="method-info"> 
 
         <h6>Payment method:</h6> 
 
         {{var payment_html}} 
 
        </td> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<tr> 
 
      <td height="20" align="center" valign="top">&nbsp;</td> 
 
      </tr> 
 
      <tr> 
 
      <td height="56" align="center" valign="middle" bgcolor="#dcdcdc"> 
 
      <img src="http://www.mysite.co.uknewsletter/brand-1.jpg" width="110" height="35" alt=""/> 
 
      <img src="http://www.mysite.co.uknewsletter/brand-2.jpg" width="110" height="35" alt=""/> 
 
      <img src="http://www.mysite.co.uknewsletter/brand-3.jpg" width="110" height="35" alt=""/> 
 
      <img src="http://www.mysite.co.uknewsletter/brand-4.jpg" width="110" height="35" alt=""/> 
 
      <img src="http://www.mysite.co.uknewsletter/brand-5.jpg" width="110" height="35" alt=""/></td> 
 
      </tr> 
 
      <tr> 
 
      <td height="75" align="center" valign="middle"> 
 
      <a href="https://www.facebook.com/SmartTeckLtd"><img src="http://www.mysite.co.uknewsletter/facebook.jpg" width="31" height="31" alt=""/></a>&nbsp; 
 
      <a href="https://twitter.com/SmartTeck_Ltd"><img src="http://www.mysite.co.uknewsletter/twitter.jpg" width="31" height="31" alt=""/></a>&nbsp; 
 
      <a href="https://plus.google.com/+SmartteckUk/"><img src="http://www.mysite.co.uknewsletter/gplus.jpg" width="31" height="31" alt=""/></a>&nbsp; 
 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/pinterest.jpg" width="31" height="31" alt=""/></a>&nbsp; 
 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/youtube.jpg" width="31" height="31" alt=""/></a>&nbsp; 
 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/instagram.jpg" width="31" height="31" alt=""/></a>&nbsp; 
 
      <a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/linkedin.jpg" width="31" height="31" alt=""/></a></td> 
 
      </tr> 
 
      <tr> 
 
      <td height="33" align="center" valign="middle" bgcolor="#1696da" style="color:#FFFFFF; font-family:arial; font-size:12px;">&copy; Copyrights 2016 Smart Tech 786 Ltd, Registered Number 09713584.</td> 
 
      </tr> 
 
      <tr> 
 
      <td height="20" align="center" valign="top" style="line-height:40px; font-size:11px; font-family:arial;"> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body> 
 
</html>

Quelle

2016-04-05 20:52:47 pau1

Verwandte Themen

 Verwandte Themen