"Download Pictures" notice when using VML for bg images in Outlook

I'm using the solution found here to apply background images inside an email. Works fine in all email environments but Outlook 07/10. Instead of the image displaying, there is only blank space (no background color either). Yes, I am seeing the "if you see this over the image, background images are successful." text, but the image underneath is not showing.

The "Click here to download pictures" notice also shows in the header of the email, so for some reason it still seems to be blocking the image from showing.

Is there a fix to this?

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- Backup background color is #DDDDDD -->
    <td bgcolor="#DDDDDD" style="background-image: url('http://www.example.com/image.png');" background="http://www.example.com/image.png" width="600" height="120" valign="top">
    <!--[if gte mso 9]>
       <v:rect style="width:600px;height:120px;" strokecolor="none">
          <v:fill type="frame" src="http://www.example.com/image.png" /></v:fill>
       </v:rect>
       <v:shape id="theText" style="position:absolute;width:600px;height:120px;">
       <![endif]-->
    <p>If you can see this over the image, background images are successful.</p>
    <!--[if gte mso 9]>
       </v:shape>
    <![endif]--></td>
  </tr>
</table> 
</body> 
</html>
roshodgekiss roshodgekiss, 4 years ago

Hi Todd, welcome to the forums! The good news is that your code is spot-on perfect. In fact, I tested it out with my own image URL and it worked a treat in Outlook 2007:

https://img.skitch.com/20120222-xb5na5xufisr5kd3ra6bcfcy15.png

This 'Click here...' warning appears by default in Outlook 2007, for any email that contains images. You can turn it off in Outlook's Trust Center for your email client - there's no universal 'code solution' around it, I'm sorry to say.

Does the background image appear if you select to download images? if not, double check that the image path is valid - you can't import the background image with the campaign, as this 'hack' isn't officially supported by the app.

Thanks, Todd! Let us know if you have any questions about this :)


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

Oh, alrighty. Appreciate the help! My original problem was that I needed a button to show for users, whether they had enabled images for that particular email or not. I thought just using background images would allow the button to display in either instance. The only solution is to have two versions I guess: one as an image for when images are enabled, and another using css if they are disabled.

roshodgekiss roshodgekiss, 4 years ago

Hi Todd, unfortunately image blocking applied to all images, both in the background and foreground. Your best bet is to style up a button using text/CSS. All the best! :D


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

Thanks for the help!

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