18

I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the problem?

Here's the HTML for the email:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <style type="text/css">

         * {
             padding: 0px;
             margin: 0px;
             border: 0px;
             outline: 0px;

           }

         .ExternalClass {width:100%;} 
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 

         body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} 
         body {margin:0; padding:0;} 
         table td {border-collapse:collapse;}   

         img {max-width:100%;}      

     </style>
 </head>

 <body>

     <table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
         <tr>
             <td>

                 <table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
                     <tr>
                          <td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
                     </tr>
                     <tr>
                         <td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">

                          <img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>

                         </td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">aaa@aaa.com!</span></td>
                     </tr>
                 </table>

             </td>
         </tr>
         <tr>
             <td>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
                     <tr>
                         <td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
                     </tr>
                  </table>
             </td>
         </tr>
        </table>
     </body>
  </html>
Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
Exploring
  • 573
  • 2
  • 6
  • 19
  • Have you downloaded the images when you check the email in outlook? – Nitesh May 08 '13 at 12:45
  • possible duplicate of [Full Width Backgrounds on Outlook '07/'10/'13](http://stackoverflow.com/questions/23280715/full-width-backgrounds-on-outlook-07-10-13) – davidcondrey May 02 '14 at 18:51

9 Answers9

23

Email-reader support for background images

Outlook 2007 and later only supports 2 ways to display a bg image:

  • Using the HTML background attribute on the body tag
  • Using the inline background-image style on the body tag

In both cases, Outlook scales the image differently than other email readers, and there's no way to prevent the bg image from tiling.

So for all practical purposes, background images aren't an option for supporting a wide range of email readers. Instead, you'll need to make do with foreground images (img tags).

Overlaying elements is not an option

Outlook 2007+, Gmail, Hotmail, and Yahoo Mail don't support CSS positioning. As a result, there's no way to place a text element on top of a foreground image.

When slicing up the email into different areas (typically using HTML tables), each area can either be a text element or a foreground image. But you can't have both in the same area (i.e., you can't have two elements occupying the same space or overlapping).

Solutions

For areas where there's an image with no text on top of it, that part of the email can be cut as a separate foreground image.

For areas where there's an image with text on top of it, there are 3 options:

  1. Cut the text as part of the image. This hurts the usability of the email, and it's especially problematic for users who have images disabled by default (as they won't initially see the text).
  2. Display the image as a background image, with the understanding that users of Outlook 2007+ will not see the image (graceful degradation).
  3. Do not attempt to display the background image in any email reader.

In moderation, option #1 is usually safe and reasonable. But when used heavily, it leads to a very high ratio of images to text in the email, which may trigger some spam filters. Before making heavy use of option #1, test the email in a variety of spam filters.

Before proceeding with options #2 or #3, you may need to clear it with the designers (as either one compromises the design in Outlook 2007+). In the bigger picture, background images should be used sparingly when designing emails. It may be helpful to point out to the designers the impact of using background images.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
  • Hi Matt, Ok. Thank you for your valuable comment but I don't understand one point. So can you please make it more clear ? Actually I am not clear about "Overlaying elements is not an option". Do you mean placing text on an image ? – Exploring May 08 '13 at 17:36
  • @user2361994: Yes, that's correct. You can't place text over an image. More generally, you can't place any type of element over another element, or make two elements overlap. I edited the answer to try to make this a little more clear. – Matt Coughlin May 08 '13 at 17:49
  • @John: Offhand, the [VML code](http://emailbg.net/) required for doing so is itself a pretty strong argument against using background images in HTML emails :) Also, this use of VML appears to cause [styling issues](http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth) for content within the affected element. I'm not convinced VML is a feasible option. – Matt Coughlin May 14 '13 at 21:35
  • @MattCoughlin I haven't really experimented with it much myself, but there are a few reply posts on the 'styling issues' link you included that politely dispute her findings. There are a few veteran email designers in the community (who I personally trust more) that say it works, but ultimately with email, you always have to concede that there are probably compromises somewhere along the line. Regardless, I think it is a viable alternative that deserves inclusion as a technique. – John May 15 '13 at 17:03
10

Outlook only supports background images in the body tag unless you use VML. Check this out for VML: http://backgrounds.cm/

Here is an example of it working in the body tag.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
6

You can do this using the correct VML. The below codepiece works best for me:

<table>
<tr>
<td background="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" width="300" height="300">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" 
    style='width:300px;height:300px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
    src="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" />
<![endif]-->
<p>Put the rest of your content here</p>
</td>
</tr>
</table>
Peter
  • 14,221
  • 15
  • 70
  • 110
5

I think you'll find this really handy: http://www.campaignmonitor.com/css/

Outlook 2007-13 doesn't support the background-image property, so there is not any good way to solve for this.

Based on personal experience: To get the most consistent experience across email clients, I would redesign the email to not require a background image.

BjornJohnson
  • 332
  • 1
  • 8
3

background-image is not supported in Outlook or Gmail on Android 2.3. See: http://www.campaignmonitor.com/css/

I usually use background-color as a fallback, or if the background image is necessary, make the text part of the image.

samanthasquared
  • 1,847
  • 1
  • 18
  • 17
  • Actually it is hard to match a color with an image. – Exploring May 08 '13 at 17:37
  • You are using several elements that I would consider graceful degradation, such as `text-shadow`, that will not work in email clients such as Outlook. So in this case, I would think setting `background-color:#8a17aa;background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');` would be a workable solution. – samanthasquared May 08 '13 at 18:32
  • Yes, I have already used this style for background-image, but the color is looking almost same. Thanks. – Exploring May 09 '13 at 16:29
2

Background image will not support in outlook 2007+ Use VML ( Vector Markup Language (VML) is an XML-based file format for two-dimensional vector graphics. ) to get support eg : 

   <div>
     <!--[if gte mso 9]>
     <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
      <v:fill type="tile" src="pink_bkg.png.png" color="#fff"/>
     </v:background>
     <![endif]-->
     <table>
       <tr>
         <td>
         </td>
       </tr>
      </table>
   </div>

Help Link : http://backgrounds.cm/

Outlook Specific /* Your Outlook-specific CSS goes here. */

‘mso 9’ is Office 2000 Outlook 2000 - Version 9 Outlook 2002 - Version 10 Outlook 2003 - Version 11 Outlook 2007 - Version 12 Outlook 2010 - Version 14 Outlook 2013 - Version 15 http://templates.mailchimp.com/development/css/outlook-conditional-css/

Prasanth
  • 46
  • 5
1

We can add this way :-

Add the following right after the opening tag…

<table cellpadding="0" cellspacing="0" border="0" height="92" width="100%">
  <tr>
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:92px;">
        <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>

…and this right before the closing tag.

      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>
Deepak Kumar
  • 221
  • 3
  • 17
0

October 2018 - Tested in Outlook 2016

Figured I'd chime in with the VML snippet that worked for me. Taken from https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16

<! — [if gte mso 9]>
<v:image xmlns:v=”urn:schemas-microsoft-com:vml” style=”width:525pt; height:348.75pt;” src=”image.jpg" /> 
<v:rect xmlns:v=”urn:schemas-microsoft-com:vml” fill=”false” stroke=”false” style=”position: relative; width:525pt; height: 161.25pt; top: 187.5pt;”>
    <v:textbox inset=”0,0,0,0"> 
<![endif] 

<!-- Content -->

<!--[if gte mso 9]>   
    </v:textbox>
</v:rect>
<![endif]-->

Other VML snippets worked to an extent but I had issues with the image disappearing after leaving the email and coming back, or not loading until the background was clicked on.

Gabe
  • 837
  • 9
  • 13
-2

I've just come across this problem while creating bulk emailer templates in MailChimp.

While the Outlook client software allows only body tag backgrounds, these are stripped out by webmail sites like Outlook webmail (hotmail), gmail etc.

The same is also true in reverse... Outlook client strips out table background images, whereas webmail clients allow table backgrounds.

Solution: use both:

<body background="image.jpg">
<table width="100%" background="image.jpg">

In Mailchimp itself, this seems to display erroneously - you can see the edge of the body background around the edges of the table background, but by the time it reaches the recipient, either one or the other is stripped out depending on whether they're using Outlook client software or Hotmail/Gmail webmail.

I'm yet to try this in other email client programs or webmail, so I don't know if there are others that would display both. If anyone has tried this method with other email client software or webmail other than Hotmail or Gmail, I'd very much like to know if this fix is universal.

Phil P
  • 1