2011-12-09 8 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] 배경 이미지를 사용할 때 '색상'대안을 사용할 수 있습니다. [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/