ニュースレターの画像

Question

誰でも私の問題を助けることができますか？私はメールチェンジャーがコードに問題があり、彼がテーブルにいなければ私のメールの内容を壊すので、カップルのテーブルセグメントでニュースレターを作ろうとします。私の主な問題はイメージオーバーイメージです。私のコードを見てください。

パターンは100％サイズ（700x50px）、ロゴはトップイメージ（32x32px）です。ロゴは、 "position"プロパティ（mailchimp break all position property）を使用せずに、margin-top -20pxとmargin-right 30pxの右側と上のパターンイメージにする必要があります。

現在、私のロゴはパターンの下にあります。私はこの問題をZ-indexで解決しようとしていましたが、ここで何も起こりません。

<table class="header_class"> 
<td> 
<img class="pattern_header"src="pattern.jpg" alt="pattern" /> 
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/> 
<h1>July 2017</h1> 
</td> 
</table> 

私のCSS：

pattern_header{ 
max-width: 700px; 
} 

logo_small{ 

margin-right: 30px; 
margin-top: -20px; 
} 

（私は完全に初心者です、多分私のコードがOKではありません）

ヘッダがどのように見えるか：

Answer 1

電子メールで作業するバックグラウンドについては、（あなたが見つけた）ポジションを使用することができます。 Outlookで作業するためには、VML（ベクトルマークアップ言語）を使用する必要があります。これはoutlook（> 2007）のネイティブです。残りの電子メールクライアントはすべて、tdのバックグラウンド宣言を読み取ることができます。以下のコードで注意すべき

いくつかのこと：

• 私はあなたがVMLのために高さを追加する必要が[HEIGHT OF IMAGE]を追加しました。
• ロゴに必要な画像寸法は指定していません。注Outlookでは、イメージのスタイル属性が読み取られません。

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
     <td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);"> 
 
     
 
     <!--[if gte mso 9]> 
 
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;"> 
 
     <v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" /> 
 
     <v:textbox inset="0,0,0,0"> 
 
     <![endif]--> 
 

 
    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
     
 
     <td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td> 
 
     </tr> 
 
    </table> 
 

 

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

これはあなたのために働くなら、私に教えてください。

Answer 2

これは私が必要なものです。ロゴの位置合わせは上端（上端から20px、右端から30pxまで）ではありません。パターンの位置合わせはトップです。

Example