2016-06-23 14 views
1

Android用GmailアプリケーションにHTMLメールのtd内に含まれる背景画像を表示する方法はありますか? iOS向けGmail Appで動作するようです。ここでAndroid用Gmailアプリケーションの背景画像

コードです:

<table width="100%" style="table-layout: fixed; margin: 0 auto; width:100% !important; min-width: 100% !important; height:auto !important;" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td align="center"> 
     <table align="center" width="760" style="table-layout: fixed; margin: 0 auto; min-width: 760px;" border="0" cellspacing="0" cellpadding="0" class="w100pc"> 
      <tr> 
       <td height="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td> 
      </tr> 
      <tr> 
       <td> 
        <table border="0" cellspacing="0" cellpadding="0"> 
         <tr> 
          <td valign="top" background="https://placeholdit.imgix.net/~text?txtsize=33&txt=760%C3%97340&w=760&h=340" bgcolor="#323232" width="760" height="340" style="min-width: 760px; background:url(https://placeholdit.imgix.net/~text?txtsize=33&txt=760%C3%97340&w=760&h=340) no-repeat center center; background-color: #323232; background-position: center center;" class="w100pcmbg"> 
           <!--[if gte mso 9]> 
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:760px;height:340px;"> 
           <v:fill type="tile" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=760%C3%97340&w=760&h=340" color="#323232" /> 
           <v:textbox inset="0,0,0,0"> 
           <![endif]--> 
           <div> 
            <table align="center" width="600" cellspacing="0" cellpadding="0" border="0" style="min-width: 600px; margin: 0 auto;" class="w100pc"> 
             <tr> 
              <td align="left" valign="top" height="15" colspan="3" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td> 
             </tr> 
             <tr> 
              <td align="left" valign="top" width="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;" class="w80"></td> 
              <td align="left" valign="top" height="260" style="line-height: 25px !important; line-height: 25px; font-size: 18px !important; padding: 0px; margin: 0px; display: block; float: left;"> 
               <span style="font-family: 'Century Gothic', Verdana, sans-serif; line-height: 25px !important; font-size: 18px !important; line-height: 25px; padding: 0px; margin: 0px; display:block; color: #787878; font-weight: bold;"> 
                Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. 
               </span> 
              </td> 
              <td align="left" valign="top" width="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;" class="w80"></td> 
             </tr> 
             <tr> 
              <td align="left" valign="top" height="15" colspan="3" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td> 
             </tr> 
            </table> 
           </div> 
           <!--[if gte mso 9]> 
           </v:textbox> 
           </v:rect> 
           <![endif]--> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td height="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td> 
      </tr> 
     </table>   
    </td> 
</tr> 

フィドル:https://jsfiddle.net/uvpb0ydc/1/

答えて

6

あなたのコードは、Android上のGmailアプリではうまく動作します。あなたがテストのためにリトマスを使用している場合は に、画像は表示されません。..リトマスでそのバグはGmailアプリのAndroid用レンダリング:)

enter image description here