background image at <td> level in hotmail

Hi! I have been struggling with an html newsletter for a while. Almost got it to work on all web clients, except for hotmail.

I am using the background-image CSS property to put a background inside td cells and write text over it. It works fine almost everywhere (thinderbird, gmail, etc...) except hotmail. Hotmail doesn't show the background image. I did a lot of research, anf found Brian Thies' post about background images in Outlook. I saw people claiming this code also works for hotmail.. I tested it but got no result. Maybe I am doing something wrong?

Here's my code. Well it's stripped down to the minimum for the purpose of this post of course. The CSS is applied inline because it's the only safe way to keep it, too many exotic webmails strip the <style> tags..

<!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=iso-8859-1" />
      <title>Cinéma Oblò</title>
   </head>
      <body>
         <div style="text-align:center;padding: 0px; font-family: Verdana,Arial,Helvetica,sans-serif; outline: none;width: 100%;">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width: 442px;margin-left: auto; margin-right: auto;">
              <tr>
                <td style="float:left;background-image:url(http://www.oblo.ch/cinema/images/programme/titre.jpg);background-repeat:no-repeat;padding:0px;margin:0px;width:442px;height:80px;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:442px">
                <v:fill type="tile" src="http://www.oblo.ch/cinema/images/programme/titre.jpg" /></v:fill>
                <v:textbox style="mso-fit-shape-to-text:true">
                <![endif]-->
                     <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width: 442px;margin-left: auto; margin-right: auto;">
                        <tr><td valign="top" style="padding:0px;margin:0px;width:442px;height:80px;">
                  <h1 style="text-align:center;font-size:18px;margin:24px 48px;padding:0px;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;">Title text</h1>
                </td></tr></table>
                  <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
                </td>
              </tr>
            </table>
        </div>
    </body>
</html>

first, why mso 9? I think it means ms office 9 and higher? is hotmail really using this? I also tried with gte vml 1, but didn't get any better result. Searching the msdn database I couldn't find other possible values.

I kept tile because the example had it, but I don't think I want it. If I get something to work, can I just leave that out, or should I specify something else? I just want the image to appear once with no repetition at all.

thanks in advance!

Mr Leb, 4 years ago

I should add that this code works well with Outlook 2007, only problem is with Hotmail.

jimmenycricket jimmenycricket, 4 years ago

Hi Mr Leb,

Try this code out

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
  <body>
        <table width="442" cellpadding="0" cellspacing="0" border="0" align="center">
          <tr>
            <td width="442" height="80" background="http://www.oblo.ch/cinema/images/programme/titre.jpg" style="background-image:url('http://www.oblo.ch/cinema/images/programme/titre.jpg')">
            <!--[if gte mso 9]>
                <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(&#35;default&#35;VML); display:inline-block;position:absolute; height:80px; width:442px;top:0;left:0;border:0;z-index:1;' src="http://www.oblo.ch/cinema/images/programme/titre.jpg"/>
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(&#35;default&#35;VML); display:inline-block;position:absolute; height:80px; width:442px;top:-5;left:-10;border:0;z-index:2;'>
                <div>
                <![endif]-->
            <table width="442" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                <td valign="top" style="text-align:center;font-size:18px;line-height:21px;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;">
                  Title text
                </td>
              </tr>
            </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
                <![endif]-->
            </td>
          </tr>
        </table>
  </body>
</html>

Get in touch for any freelance work!
Mr Leb, 4 years ago

Hi jimmeny!

this indeed works.. thanks a lot! and I understand why, I was trying to get the vml code to work whereas.. it simply is the <td background="url..."> that makes it work fine in hotmail.. crazy :)

question is, can specifying both the background=".. and style="background-image... potentially cause problems? like the images will be layered one on the other, maybe slightly off? or specifiying background-image will always override the background if the browser/webmail handles it?

thanks!

roshodgekiss roshodgekiss, 4 years ago

question is, can specifying both the background=".. and style="background-image... potentially cause problems? like the images will be layered one on the other, maybe slightly off?

No, this is always fine - we generally recommend you use both :) background-image usually takes precedence over background-color so you shouldn't have any issues here.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jimmenycricket jimmenycricket, 4 years ago

No worries Mr Leb!

Sometimes I have encountered an issue, I have resolved it by adjusting the top and left figures of the z-index until both images are aligned again:

top:-5;left:-10;


Get in touch for any freelance work!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098