gennaria, 5 years ago

Thanks, roshodgekiss. I'll look into that as a possible solution. In the meantime, I've modified the background image to be 10pixels to the right which partially solves the problem (although since my image is a repeating background, I can't do the same for the top where it sticks above the content.)

All of this has also led me to discover another problem with this particularly solution for background images, which is that using align="right" on an image or table to allow text to wrap around will not work in Outlook 2007/2010 when the VML background hack has been applied. Simply removing the MS specific code allows Outlook to correctly wrap the text around the image.

After extensive research I have been unable to find a work around to this other then using tables cells to manually align the text and image. The downside to this solution is most noticeable when trying to create a template where the total amount of text is unknown.

OtherRob, 5 years ago

Hi, roshodgekiss.

Hi OtherRob, no images will display when images are turned off in the email client, background images or otherwise. The code you have there looks sound, so this is most probably the issue.

That's not quite what I was asking. I want a gray background to appear in the the table cell when images are turned off (i.e., <td bgcolor="#e6e6e6"...>) This used to work with the "old" way of adding background images with v:image, but it's not working with the new v:rect method. Is this no longer possible?

Thanks.

roshodgekiss roshodgekiss, 5 years ago

I'm sorry for the misunderstanding on my part, OtherRob! Actually, it is possible to display a backup background colour, using the Color VML attribute. Here's the code I used to get this to work:

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
  <tr valign="top">
    <td height="250" bgcolor="#e6e6e6"><p>This table cell does not have a background image. The background color shows up in Outlook 2007.</p></td>
    <td width="310" height="275" bgcolor="#e6e6e6" style="background-image:url('http://www.reedconstructiondata.com/images/specedge/table-of-contents_bg_275.jpg'); background-repeat:no-repeat;">
    <!--[if gte mso 9]>
    <v:rect style="width:310px;height:275px;" strokecolor="none">
    <v:fill type="frame" color="#e6e6e6" src="http://www.reedconstructiondata.com/images/specedge/table-of-contents_bg_275.jpg" /></v:fill>
    </v:rect>
    <v:shape id="theText" style="position:absolute;width:310px;height:275px;">
    <![endif]-->  
      <p>This cell does have a background image, but the background color does not show in Outlook 2007 when images are turned off.</p>
      
    <!--[if gte mso 9]>
    </v:shape>
    <![endif]--></td>
  </tr>
</table>

Thank you so much for clarifying for me - i'll update the blog post to feature this. All the best!


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

That worked! Thanks. :-)

gennaria, 5 years ago

I just ran into a situation I thought I'd share. I'm building a newsletter template with a tiling background using the method outlined in this thread. Outlook appears to be abruptly cutting off the content (mid image, mid letter) at about 2100 pixels. Nothing I've tried changes this. If I remove the MSO conditional the email displays the full length (albeit without the background image).

If someone has successfully used this with a tiling background on an email longer then this, please let me know.

michaelbirchall, 5 years ago

Hello all,

I've tried to incorporate this into an HTML email signature... however when the Outlook user replies to my message it turns the sig into a shape...

I've detailed the problem here...
http://stackoverflow.com/questions/10732829/html-email-signature-returning-png-file-on-outlook-reply

If anyone could lend me some knowledge it would be greatly appreciated.

BThies BThies, 5 years ago

@michaelbirchall

The VML method is only used for background images when sending HTML emails from a deployment service such as Campaign Monitor, MailChimp, etc.  When sending an email from within Outlook, the program itself will add its own code to your signature, which will remove/strip the coding you've created (Including the VML code).

To top it off, Outlook is notorious for messing with the HTML of any email upon reply, so there's no way to guarantee what you've sent will remain intact.


Brian Thies
Professional Email Developer
Thies Publishing
talvins, 5 years ago

Hi,
I would like to use your technique but on your example, images are online.
As usual, my emailing use local images, which are zipped and send to Campaign Monitor with html file.

Unfortunately, CM doesn't replace path into <v:> tag (or html comment ?).

Thus, I have this :

<td width="492" height="136" colspan="4" bgcolor="#2D5590" valign="top" align="center" background="http://i9.createsend1.com/ei/r/D8/6E0/AB3/040XXX/back.jpg" style="text-align:center">
                  <!--[if gte mso 9]>
                 <v:rect style="width:492px;height:136px;" strokecolor="none">
                    <v:fill type="tile" color="#FFFFFF" src="images/back.jpg" /></v:fill>
                 </v:rect>
                 <v:shape id="theText" style="position:absolute;width:492px;height:136px;">
                 <![endif]-->
    
                  <p style="margin-top:10px;color:#ffffff;font-size: 15px;letter-spacing:1px">blablabla
                  </p>
    
              <!--[if gte mso 9]>
                     </v:shape>
                  <![endif]-->
                </td>

As you can see, td background is http://i9.createsend1.com/ei... but <v: src="images/back.jpg"

What can I do ?

thanks.

BThies BThies, 5 years ago

@talvins - the background image needs to be self hosted.


Brian Thies
Professional Email Developer
Thies Publishing
talvins, 5 years ago

ok, thanks. It works fine BUT background color is not applied.

I add bgcolor to the table, to the td, with bgcolor and in style. I also try to add fillcolor in <v:fill>. None works.

Does someone already succeeded ?

acastor, 5 years ago

Hello,
First let me say thank you so much, what a great hack to get this working in outlook.

Now onto my problem :)

Everything works perfectly in outlook 07/10, however in web clients such as gmail, the text that I am trying to display above the image, is shown in a blank white space below the image.

Here is the code as I have it:

<!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>
    <title>HVAC Success Confirmation</title>
    <style type="text/css">
        .foot
        {
            background-image: 'http://www2.hvacsuccessnow.com/Airtime/Admin/email/images/Airtime/bottonbar.jpg';
            background-repeat: no-repeat;
            background-color: Gray;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body style="background-color: #999999; vertical-align: top;">
    <table style="vertical-align: top; margin-top: 0px; margin-left: auto; margin-right: auto;
        width: 800px;">
        <tr>
            <td background="http://www2.hvacsuccessnow.com/Airtime/Admin/email/images/Airtime/head.jpg"
                height="106" width="800">
                <!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:106px; width:800px;top:0;left:0;border:0;z-index:1;' src="http://www2.hvacsuccessnow.com/Airtime/Admin/email/images/Airtime/head.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:106px; width:800px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
                <!-- This is where you nest a table with the content that will float over the image -->
                <table width="800" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td>
                            <h1 style="font-size: 50px; font-weight: bold; color: White; text-indent: 110px;
                                text-shadow: 2px 2px 3px black; padding-top: 15;">
                                YOUR CONFIRMATION</h1>
                        </td>
                    </tr>
                </table>
                <!-- This ends the nested table content -->
                <!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
            </td>
        </tr>
    </table>
    <table style="vertical-align: top; margin-top: 0px; margin-left: auto; margin-right: auto;
        width: 800px;">
        <tr style="padding-bottom: 0px; margin-bottom: 0px;">
            <td background="http://www2.hvacsuccessnow.com/Airtime/Admin/email/images/Airtime/body.jpg"
                height="700" width="800">
                <!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:700px; width:800px;top:0;left:0;border:0;z-index:1;' src="http://www2.hvacsuccessnow.com/Airtime/Admin/email/images/Airtime/body.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:700px; width:800px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
                <!-- This is where you nest a table with the content that will float over the image -->
                <table width="800" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td colspan="2" style="padding-left: 100px; padding-right: 100px;">
                            <h1 style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                font-size: 27px;">
                                Airtime 500&reg;</h1>
                            <p style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                font-size: 15px;">
                                We are making our final plans for this year's Success Day&trade; in your area and
                                your seat(s) is reserved!</p>
                            <ul>
                                <li style="color: Red"><span style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                    color: #666666;">How to REALLY know your numbers</span></li>
                                <li style="color: Red"><span style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                    color: #666666;">Pricing Structures & Simple ways to increase revenue</span></li>
                                <li style="color: Red"><span style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                    color: #666666;">Beat the "Feast or Famine" Trend in the industry</span></li>
                                <li style="color: Red"><span style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                    color: #666666;">Find Good, Decent Technicians</span></li>
                                <li style="color: Red"><span style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                    color: #666666;">How to fight back against cut-throat, unethical competition.</span></li>
                            </ul>
                            <p style="color: Black; font-family: Trebuchet MS , Helvetica Neue , Helvetica, Arial, sans-serif;
                                font-size: 17px">
                                You Will Get a Behind-the-Scenes Look at the Operations, Marketing, Management,
                                and Training Tools that the top Roofing Contractors are using to Thrive...while
                                many Others are Closing their Doors!</p>
                            <p>
                                Tell: 866-574-2312 ext 555
                            </p>
                            <p>
                                Representative Name : representative@yoursgi.com
                            </p>
                        </td>
                    </tr>
                    <br />
                    <br />
                    <br />
                    <tr style="padding-top: 0px; margin-top: 0px;">
                        <td style="padding-left: 100px;">
                            <p style="width: 250px;">
                                <b>Success Day&trade; City, ST<br />
                                    Monday, August 10, 2011<br />
                                    Continental Breakfast at 7:30am<br />
                                    Lunch Served</b>
                                <br />
                                <br />
                                <b>Location Details:</b><br />
                                Hotel Name<br />
                                1900 Street Cir. City, ST 44444
                            </p>
                        </td>
                        <td style="padding-right: 100px;">
                            <img src="images/Airtime/hotel.jpg" width="227px" height="153px" alt="Hotel Image" />
                        </td>
                    </tr>
                </table>
                <!-- This ends the nested table content -->
                <!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
            </td>
        </tr>
    </table>
    <table class="foot" width="800" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td style="font-size: 20px; color: #FFFFFF; width: 350px; vertical-align: middle;
                padding-top: 20px; text-align: right; padding-left: 150px; text-decoration: none;">
                866-574-7431 <span style="font-size: 30px; color: #FFFFFF;">|</span>
            </td>
            <td style="font-size: 10px; color: White; width: 200px; vertical-align: middle; text-align: center;
                padding-top: 20px;">
                Airtime 500&reg; | Plaza Five Points 50 Central Ave, Ste 920 | Sarasota, FL 34236
            </td>
            <td style="font-size: 23px; color: White; width: 250px; padding-right: 2px; vertical-align: middle;
                padding-top: 20px;">
                <span style="font-size: 30px; color: #FFFFFF;">|</span> <a href="http://www.airtime500.com"
                    style="color: #FFFFFF; text-decoration: none;"><span style="font-size: 12px;">www.</span>AirTime500<span
                        style="font-size: 12px;">.com</span></a>
            </td>
        </tr>
    </table>
</body>
</html>

Thanks for the help,
Castor

shan_2000_uk, 4 years ago

Hi,

I can't seem to make this fix work! Here's the code i have the the table header in my email template... Can someone please advise as to where I'm going wrong? Anything at all is much appreciated:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<table width="0" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td  background="http://www.idee-emarketing.com/admin/temp/templates/3/header.jpg" width="590" height="151" >
   
    <!--[if gte vml 1]> <v:image style='width: 590px; height: 151px; position: absolute; top: 0; left: 0; border: 0; z-index: -1;' src="http://www.idee-emarketing.com/admin/temp/templates/3/header.jpg" /><![endif]-->
       
    </td>
  </tr>
</table>

</body>
</html>

Stig Stig, 4 years ago

Hey everyone, I just wanted to let you know about a new tool I put together this weekend:

emailbg.net

This will hopefully make it easier to add a background image to your emails, and also offers a way to add full width background images, using the mso-width-percent attribute in Outlook.

Big thanks to Brian and everyone else who has contributed here! I'd love to hear any suggestions you may have, both for the resulting code and the tool itself.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Polar, 4 years ago

Hi Stig (and all other). I stumbled over this long requested solution as I wanted to give my email a feel and look of my website. I know some html and css, so wanted to try this. First the good news :o): it worked from with the first test!

But the I checked my email from an older email reader (MS Outlook Express 6), and here the background image was not showing.

I used emailbg.net and made this setup:

<body>
<div align="center">
  <table width="600" border="0">
    <tr>
      <td background="http://care4u.co.nf/images/email/bg-600x900.jpg" bgcolor="#ffffff" width="600" height="528" valign="top">
        <div>
          <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:450px;">
    <v:fill type="tile" src="http://care4u.co.nf/images/email/bg-600x900.jpg" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
        </div>
        
<table border="0" cellspacing="0" cellpadding="10">
    <tr>
      <td height="128" rowspan="2" valign="top">&nbsp;</td>
      <td width="90" rowspan="2" valign="top">&nbsp;</td>
      <td width="349" height="80" valign="top">&nbsp;</td>
      <td rowspan="2" valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td height="56" valign="top"><a href="https://www.facebook.com/Care4U.hypnoterapi.EFT/app_197936773558886" target="_blank" >  <img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" alt="Facebook" border="0" align="right" /></a></td>
    </tr>
    <tr>
      <td height="42" valign="top">&nbsp;</td>
      <td colspan="2" valign="top" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: small; color: #6C6868;"><p>Here is coming some content.</p>
        <p>Looks great!</p></td>
      <td valign="top">&nbsp;</td>
    </tr>
    <tr>
        <td width="71" height="258" valign="top">&nbsp;</td>
        <td colspan="2" valign="top" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: small; color: #6C6868;">
            <p>Some more content</p>
        </td>
        <td >&nbsp;</td>
    </tr>
</table>
        
        <div>
          <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
      </div></td>
    </tr>
  </table>
</div>
</body>

I don't understand what is missing, except that I know there is a if gte mso 9. But what about gte 9 and lower? How do I cover those?

Regards,

Polar

roshodgekiss roshodgekiss, 4 years ago

Hi Polar, admittedly we don't get many requests for Outlook Express support these days - v6 was released in 2001, after all! However, you could potentially experiment with changing all instances of [if gte mso 9] to something lower (eg. mso 6?). No promises it will work, especially as I'm unsure whether this version of OE supports background images at all...!


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

@roshodgekiss: Thanks for your reply. Indeed Outlook Express 6 is very old product, shelved and all. So I wonder if it worth the while using efforts on this. I guess one has to draw a line somewhere. The email still looks OK. All info is there, just not the graphical design.

Typical that the second windows based email client I tested this on (my wife's notebook) gave me this result. On my PC I use Thunderbird, and all was OK. But I also use a web based solution called SOGo, and here the background image also was missing. Next I checked a universal web email solution called mail2web.com. Same problem here.

According to mailbg.net/about this coding should cover the most email clients. May just leave it to that. As long as the email is not filled with garbage, and looks fine. The purpose of this test was using stationary with logo, and look and feel of the web site (brand building). The other challenge will be making a suitable layout for a newsletter for product and service information, events etc... . I guess tables with colored backgrounds, banner and pictures is more the way to go. This gives me the option to use the full 600 px for text as opposed to my current design where I only have 440 px due to the layout.

Just wondering, being the analytic mind that I am.... .Is there a overview here that gives an idea on how the shares are divided when it comes to email clients world wide?

Polar, 4 years ago

Got it right here :

http://www.campaignmonitor.com/resources/will-it-work/email-clients/
http://emailclientmarketshare.com/

Polar, 4 years ago

just discovered that the same email send to my iPad is not showing the background. Knowing that iPad mail is the #3 mail client, this worries me. Any one out there that has experience with this? How to fix?

jimmenycricket jimmenycricket, 4 years ago

Hey polar, I did some testing on background images last week to iPad and iPad 2 and everything was working as should be. Have you been having issues testing to the iPad 3?


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

@jimmenycricket: Only testet iPad(1). Don't have access to a newer model. Was your background tag any different from what I used in the code above? Do you have an example? Many thanks in advance.

jimmenycricket jimmenycricket, 4 years ago

Hey Polar, i haven't tested it but give this a try:

<body>
<div align="center">
  <table width="600" border="0">
    <tr>
      <td background="http://care4u.co.nf/images/email/bg-600x900.jpg" bgcolor="#ffffff" width="600" height="528" valign="top">
        <div>
          <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:450px;">
    <v:fill type="tile" src="http://care4u.co.nf/images/email/bg-600x900.jpg" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
        
<table border="0" cellspacing="0" cellpadding="10">
    <tr>
      <td height="128" rowspan="2" valign="top">&nbsp;</td>
      <td width="90" rowspan="2" valign="top">&nbsp;</td>
      <td width="349" height="80" valign="top">&nbsp;</td>
      <td rowspan="2" valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td height="56" valign="top"><a href="https://www.facebook.com/Care4U.hypnoterapi.EFT/app_197936773558886" target="_blank" >  <img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" alt="Facebook" border="0" align="right" /></a></td>
    </tr>
    <tr>
      <td height="42" valign="top">&nbsp;</td>
      <td colspan="2" valign="top" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: small; color: #6C6868;"><p>Here is coming some content.</p>
        <p>Looks great!</p></td>
      <td valign="top">&nbsp;</td>
    </tr>
    <tr>
        <td width="71" height="258" valign="top">&nbsp;</td>
        <td colspan="2" valign="top" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: small; color: #6C6868;">
            <p>Some more content</p>
        </td>
        <td >&nbsp;</td>
    </tr>
</table>
          <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
      </div></td>
    </tr>
  </table>
</div>
</body>

You have an opening <div> tag and a closing </div> tag surrounding both the top and bottom part of the VML code which maybe causing the issue

Also the image itself doesnt work:

http://care4u.co.nf/images/email/bg-600x900.jpg


Hope that helps


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

Thx for taking the time and having a look. I copied and pasted the setup from mailbg.net. Having that said, it looks reasonable that the first part of the VML needs its own div, and the closure also. I removed the block 1 closing div, and the block 2 opening div. But it gives the same result.

The images can not be called up direct (hotlink protection) but it works fine when used in a html setting (like http://care4u.co.nf/images/email/test.htm).

If you did some testing and it worked on your iPad, can you send me an email to my iPad1 with a plain table with a bg image? Just to see if it is my email client that is messing things up? Or maybe my server that has this hotlink protection that is blocking it? Maybe just post a html example if emailing is to much trouble? Just in case you are having plans to enjoy your weekend   :op

Have a nice weekend :o) !

jimmenycricket jimmenycricket, 4 years ago

Hey Polar, sorry for the late reply

What is it that you would like me to do?

You definitely don't want an opening <div> and a closing </div> around both the top and bottom part of the VML code, that makes no sense!


Get in touch for any freelance work!
  1. 1
  2. 6
  3. 7
  4. 8
  5. 9

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098