2011-12-09 26 views
0

私は、これは現実を少し押している知っているが、私はこの質問をする必要があります...HTML形式の電子メールテンプレート

が、それは上のノー繰り返しで固定された背景イメージを持っている、とテーブルにすることは可能です画像の前に?

現時点の問題は、現在の画像の前にあるテーブルが長くなると(画像の高さよりも長くなる)、画像が自己下向きに繰り返され、実際には醜くてプロフェッショナルに見えます。

Divは質問には答えられません。メールではうまく動作しません。

画像は基本的に上から下へ黒から薄い青色の影の画像です。

以下は私のOutlook電子メールとのマージに使用しているhtmlテンプレートです。

<body style="background: transparent url(<MY IMAGE>;);"> 
<table align="center" border="0" cellpadding="0" cellspacing="0" width=700"> 
     <tbody style="text-wrap:normal;word-wrap:break-word"> 
      <tr> 
       <td> 
        <font face="Verdana"><img height="20" src="<MY IMAGE>" style="width: 700px; height: 20px;" width="1" /></font></td> 
      </tr> 
      <tr> 
       <td> 
        <font face="Verdana"><img height="80" src="<MY IMAGE>" style="width: 750px; height: 80px;" width="750" /></font></td> 
      </tr> 
      <tr> 
       <td align="left" bgcolor="#FFFFFF" style="padding: 10px;"> 
        <p> 
         <span style="font-size: 14pt;"><strong><span style="color: rgb(0, 0, 128);"><font face="Verdana">Place Heading here.</font></span></strong></span><br /> 
         <br /> 
         <span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;">Place text here. 
         Place text here.Place text here. 
         <br /> 
         <br /> 
         </span></span></p> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <font face="Verdana"><img height="90" src="<MY IMAGE>" style="width: 750px; height: 90px;" width="750" /></font></td> 
      </tr> 
      <tr> 
       <td align="left" bgcolor="#83B5D4" style="font-size: 9px; color: rgb(255, 255, 255);"> 
        <font face="Verdana"><img height="10" src="<MY IMAGE>" style="width: 10px; height: 10px;" width="10" /></font></td> 
      </tr> 
      <tr> 
       <td align="center" bgcolor="#162C76" style="padding: 10px;" valign="middle"> 
        <font color="#FFFFFF" face="Verdana" style="font-size: 10px; line-height: 1.5em;">Tel: +27 11 454 1074 | Fax: +27 11 454 1073 | <a href="mailto:[email protected]" style="color: rgb(255, 255, 255); text-decoration: none;">[email protected]</a> | <a href="http://cts.vresp.com/c/?PSIberSolutions/45620e101d/TEST/b2198ee889" style="color: rgb(255, 255, 255); text-decoration: none;" target="_blank">www.psiberworks.com</a><br /> 
        15 Seventh Avenue, Edenvale, 1610</font></td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
+2

[背景画像のプロパティは電子メールの互換性に制限がある] [1]ということに注意してください。背景画像を使用する場合は-colorの代わりに使用します。 [1]:http://www.campaignmonitor.com/css/ – Wex

+0

スタイル属性&background-colorに「no-repeat top」を追加します:['light-blue']? – ptriek

+0

@priekこれらのCSSスタイルは> Outlook 2007、HotmailまたはGmailでは機能しません。 Wexのリンクを確認してください.HTMLメールを作成する上で非常に役立ちます –

答えて

0

私がこれを回避したのは、カラーパディングの負荷を画像の下部に追加することでした。セルはプッシュダウンされ、さまざまな電子メールブラウザで動作しないCSSスタイルについて心配する必要がなくなるまで、これをすべて非表示にします。

背景画像は、多くの電子メールブラウザで痛みを伴います。しかし、あなたが本当に必要な場合は、Outlook 2007にそれらをハックすることができます - http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/

関連する問題