Html Email With Background-image Style Not Shown

March 31, 2024 Post a Comment

I am creating an email template which has to display images from external website. I had placed some tags for rendering the images and there are some tags wi

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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

Solution 5:

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 >
 <styletype="”text/css”">
       v\:* { behavior: url(#default#VML); display:inline-block}
 </style>

In table or where you need add your MSWord alternate

<tablestyle="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.

Html5 Info