html email with background-image style not shown

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!

At last I found the answer.

Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.

Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.

More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx

Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.

Che Mearns

There is actually a method to use background images in HTML emails in Outlook.

As Chaitanya mentions it can't be done with CSS, but it can be done via VML.

The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.

I've used it successfully on a number of campaigns.

Full instructions here: including a list of email clients that support this technique.

http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.

Davut Gürbüz

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 ;

Added v namespace to html tag

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

Added v's style to head block

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

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.

This works in Gmail,

I tried this to show div with image in email newsletter, try inline css, sending email guidelines here

来源：https://stackoverflow.com/questions/4689862/html-email-with-background-image-style-not-shown

标签

html-email