html email with background-image style not shown

Question

I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.

Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.

Any views on solving this problem?

Thanks!

Answer 1

There is a way of displaying HTML images.

Right html emails rendered as MSWord document in outlook.

I got the solution from this https://stackoverflow.com/a/12693917/413032 post.

So we need an alternate.

In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.

Here is what I did ;

1. Added v namespace to html tag

     < html xmlns:v="urn:schemas-microsoft-com:vml"
   

2. Added v's style to head block

   < head >
    <style type="”text/css”">
          v\:* { behavior: url(#default#VML); display:inline-block}
    </style>
   

3. In table or where you need add your MSWord alternate

   <table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
               <!--[if gte vml 1]>
                       <v:shape 
                           stroked='f'
                            style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;     
                                   z-index:-503306481;
                                   visibility:visible;
                                   width:720pt;
                                   height:475pt;           
                                   top:0;
                                   left:0;
                                   border:0;                                               
                                   '>
                           <v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
                       </v:shape>
               <![endif]-->
                   <tbody> ....
   

That is all. Sure it will be a MSWord render. And more, as you notice we use absolute positioning...

Anyway this is a workaround and solves the issue in a way. We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.