Click to Sign Up for a 7 Day Free Trial!

Email Development

Vector Markup Language and Backgrounds

Email On Acid

Background Check

Backgrounds might seem like they should be a simple effect to achieve in HTML email, but that's not always the case. Outlook 2007, 2010 and even 2013 will give users who rely on the TD background-image property a lot of trouble. Because of these problems many have turned to Vector Markup Language (VML), part of the Office Open XML standards. VML has mostly been scrapped in favor of SVG, but older email clients still use it. Campaign Monitor covered the following ways to implement VML for email backgrounds, but we're going to add one more trick to that list at the end of this blog. Let's start with this custom Mictrosoft HTML namespace declaration:

<html xmlns:v="urn:schemas-microsoft-com:vml">

This namespace declaration is necessary to make sure VML capable clients render your VML properly.

 

Table Cell Backgrounds - Fixed Width

Given the prevalence of table-based email design, it won't be long before you want to apply a background to a table cell. Remember to include the namespace declaration we covered above. This example uses a conditional statement to target Outlook clients, as well as the proprietary TD "background" attribute. TD's without background will not show an image in Outlook.com and Lotus Notes. The fix below only works on TD's with a fixed width, we'll cover fluid width TD's next.

 <html xmlns:v="urn:schemas-microsoft-com:vml">
 <body>
 <table width="600">
   <tr>
     <td bgcolor="#363636" style="background-image: url('http://www.website.com/background.png');"
       background="http://www.website.com/background.png" width="540" height="150">
       <!--[if gte mso 9]>
       <v:rect style="width:540px;height:150px;" strokecolor="none">
         <v:fill type="tile" color="#363636" src="http://www.website.com/background.png" /></v:fill>
       </v:rect>
       <v:shape id="NameHere" style="position:absolute;width:540px;height:150px;">
       <![endif]-->
     <p>This text should appear on top of your background image.</p>
       <!--[if gte mso 9]>
       </v:shape>
       <![endif]--></td>
   </tr>
 </table> 

Table Cell Backgrounds - Percentage-Based Width

It gets a bit trickier to create a tiling background for a TD with percentage-based width. We found that the v:rect element wouldn't take width:100% or width:full as width values. Instead, the  mso-width-percent style can be used to create a fluid width background. It might look confusing at first, but  mso-width-percent is actually quite simple. The number you need to pass to it is ten times the percentage you'd like. This means that  mso-width-percent: 1000; is actually 100%, or full page width. For 50% one would enter  mso-width-percent:500;. Remember to change these values on both the TD and VML shape elements when modifying this code.

 <table width="100%">
   <tr>
     <!-- Backup background color is #dddddd -->
     <td bgcolor="#dddddd" style="background-image: url('http://www.website.com/background.png');background-repeat:repeat-x; background-position: bottom left;"
       background="http://www.website.com/background.png" width="100%" height="30">
       <!--[if gte mso 9]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:30px;">
           <v:fill type="tile" src="http://www.website.com/background.png" color="#f6f6f6" />
         </v:rect>
       <![endif]-->
     </td>
   </tr>
 </table> 

It's not pretty, but it works. Even with tricks like these, backgrounds provide email designers with no shortage of challenges. What background quirks have gotten your goat? Let us know in the comments below.

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

This is a good pointer - however, the problem is made worse if you only need to use a table cell background which fits the content - for some reason, the mso-width-percent:1000 ends up making the cell much wider than it needs to be!
RWAP01
RWAP01,
You should take a look at the "Table Cell Backgrounds - Fixed Width" section, which has the code for fixed width table cells. "mso-width-percent:1000" is for 100% width cells.
Geoff Phillips
I have looked at that, but for some reason, having added that, the table cell is much much wider than the content (which is just a text link!)

My guess is that mso-width-percent:1000 is still looking for the fixed width of the table cell (which I do not have).
RWAP01
RWAP01,
Did you remember to modify the width in all three places? The TD, the v:rect and the v:shape?
Geoff Phillips
RWAP01,
You shouldn't be using mso-width-percent:1000 in a fixed width table cell. Express the width in px in all 3 places (TD, v:rect, v:shape) and it should work properly.
Geoff Phillips
Hmm - I can see the misunderstanding - the problem is that I do not know the fixed cell width - I was trying to use the same code in several emails - each of which may have different length text in the link - ie. the width of the column actually reflects how much text is in it, so it cannot be fixed width.

This is actually for a three image button (as you can do in HTML), with a div for the left and right hand sides of the button, each containing an image, and a middle div with a background image.

The problem is that the text in the button can vary dependent on circumstances

Reading between the lines, this is not possible - the vml controls for the image either need a fixed width setting, or a % width based on the width of the table (?).

I guess I will have to use different code in each email dependent upon the text used in the column.
RWAP01
Why text on image backgriung is not selectable/linkable?
Frank
Thanks a bunch for this!
I was told by our lead designer after presenting my initial email redesign mock-up, that background images weren't a 'thing' in email.
Where there's a will, there's a way, and I've managed to match his design for our website using this technique.
Niven Ranchhod
I should also mention it's working great on my responsive template, in all viewports
Niven Ranchhod
my CMS is stripping out the conditional statement. any way to prevent that??
Brandon Cozart
Thanks for info i like it. Great Posting. I'm sharing it to twitter!
background
This works very well BUT when I click on NEW for a new email in Outlook 2013, it takes 10 seconds to come back with my fantastic VML signature... any ideas?
Helen Hudson
Thanks for this, it's a big help!

Any ideas about how to change dimensions for mobile?

My image is in a 100% width table, inside a 600px container. I'm using CSS media query in the header to change width for mobile. If I change the image table to 600px width and use <!--[if gte mso 9]> inside my table, the image is too large for mobile. Is there another kind of conditional to use in the html for mobile in addition to <!--[if gte mso 9]>, or a way to put VML inside css instead?
Sam
Has anybody figured out how to keep the background-image centered when using this full-width solution? As is, it aligns left.
David Condrey
Hello grin

the fixed-code makes me really happy after hours of time-wasting to get outlook to show my images.
but i have one little prob, maybe you could help.

td / vml-code/ image have all the same size 95px x 642px, but in outlook the backgound-image is shown more than once in a smaller version. can i use something like repeat?

thank you so much grin
Claudia
I really appreciate this helpful info, but I am having an annoying problem.

I am using a fixed width/height cell and setting the width/height in all three places (TD, v:rect, v:shape) as described above, but my image always shows blown up larger for some reason.

The image itself is the exact width/height of the TD, rect, shape, but it is displaying larger.

Any ideas?
fosforus
It doesn't work at all for me. The background images don't load.

It seems that the problem is the namespace declaration is stripped out of emails when they are sent. When I look at the source code, I don't it anymore.

Any idea how to stop this?
Sean
Sean,
If your ESP is stripping code that you need, I'd talk to them about it. You may want to switch your ESP to somebody who won't modify your code.
Geoff Phillips
I can't get this code to work on Outlook 2010.

On the "Table Cell Backgrounds - Percentage-Based Width" snippet, where should I add my content, right after the "<![endif]-->" comment?

Am i wrong?
Alessandro
in outlook 2013 it adds a huge space at the bottom of my table.

any clue how to fix it?
mate1test
I'm having the same issue as "Alessandro". Can you please help us fix for Outlook 2010?
xTwIzZ
xTwIzZ,
I'm not sure what Alessandro meant by "Content." Can you share the code in question? We can also help you if you'd like to email our support team, https://www.emailonacid.com/contact.
Geoff Phillips
Hi Geoff, thanks for replying to my email. I went ahead and emailed my code snippet via emailonacid.com/contact. I appreciate your help. Thanks man.
xTwIzZ
Hi Geoff, for some odd reason my background images still don't render in Office 2010. Any ideas? Here is my code:


<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>BLANK</title>
</head>
<body>
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.pegaweb.com/tutorials/web-page-backgrounds/1.jpg" ></v:background>
<![endif]-->

<!-- HEADER GRAPHIC START -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="http://www.pegaweb.com/tutorials/web-page-backgrounds/1.jpg" bgcolor="#ff0000" valign="top" align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="http://www.pegaweb.com/tutorials/web-page-backgrounds/1.jpg" color="#ff0000" >
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
BLANK

BLANK

BLANK

BLANK

BLANK

BLANK

BLANK

BLANK

BLANK

BLANK

</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
xTwIzZ
Did anyone ever get this sorted? I too am having the same issues with Outlook 2010 My code is:

<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td background="hero.jpg" width="600" height="342" bgcolor="#650360" valign="top" style="color:#ffffff;font-size:24px;">
<!--[if gte mso 9]>
<v:rect stroke="false" style="width:600px;height:342px;">
<v:fill type="frame" src="hero.jpg" color="#650360" >
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="124" height="120">spacer.gif</td><td> </td>
</tr>
<tr>
<td align="right" valign="top">welcome-line.gif</td><td valign="top">

Welcome Jamie
<font style="color:#ffffff;font-size:16px;font-family: 'Source Sans Pro Regular',Arial, Helvetica, sans-serif;margin:0;padding:0;width:244px">Your adventure starts here</font></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Jamie
Hi,

I'm having issues with Outlook 2013 where the VML background doesn't show in the preview pane. If you open the email up, it appears fine. Any ideas?

Cheers, Daz
desiredigital
Daz,
Wish I could help you more, but I am not an expert in VML. Seems like the preview pane should show the same thing, but who knows what they were thinking!
Geoff Phillips
Thanks for your hard work Geoff. I'm trying to use the full-width VML code, but it appears to show the bg image at the top, with overlaying text (a separate table inside the TD that holds the bg image) underneath it. This makes it look tall. Here's what it looks like:
http://www.screencast.com/t/FqNPHI3GdZWB


Here's my html:

...
<html xmlns:v="urn:schemas-microsoft-com:vml">
...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="346" width="100%" align="center" valign="top" background="img url here" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 16px; line-height: 16px; margin: 0px; background-image: url('img url here'); background-size: cover; background-repeat: no-repeat !important;" bgcolor="#055697">


<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:346px;">
<v:fill type="frame" src="img url here" color="#055697" >
</v:rect>
<![endif]-->


<table width="650" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper">
...this is the overlaying table with an image and text over the bg image...
</table>

<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>


Any ideas what's causing the bg image to stack over the overlaying table in it? Thanks in advance!
AJ
I'm not sure if you notice, but if you're using a fixed-width bg image with text/image inside an inner table that's overlaying it, if the valign attribute of the TD that holds the bg image is not set to "top" (in my case it was set to "bottom"), the bg image will left-align, not centered.

David Condrey, is the bg image in the TD set to valign="bottom" or "middle"? If so, try setting it to "top". In my case, since I have an inner table that holds overlaying copy and image, I added an empty table "spacer" and set the height to a value that helps push down the overlaying table.
AJ
This works fine. However in Outlook 2007/2010, the table I have always goes to the top right rather than being centered like I have it in my code. Here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
</head>
<body>
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td style="width:600px; height:400px; background-image:url('http://likegif.com/wp-content/uploads/2013/12/nature-animation-gif-6.gif');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='position:absolute; width:600px; height:400px; top:0; left:0;' src="http://likegif.com/wp-content/uploads/2013/12/nature-animation-gif-6.gif" >
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='position:absolute; width:300px; height:400px; top:0; left:0;'>
<![endif]-->
<table class="test" width="300" align="center" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto; background-color:#cccccc;">
<tr>
<td align="center" valign="top" style="color:#ffffff; font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>


I am referring to the table that has the "test" classs.
Steven G
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='position:absolute; width:300px; height:400px; top:0; left:0;'>

Your width and height on the previous parts of the code have width:600px height:400px. Make sure everything matches. Judging by the dimensions of your image the correct width and height in the VML should be width:600px height:400px everywhere in that code.
Hector
I can't get this to work in Outlook 2016 or 2013 for Windows. On a Mac and in older versions it displays perfectly. Any suggestions?
kris
When I forward my newsletter using Outlook 2013, the link to my style sheet gets removed, thus the media queries don't exist. Is there a way to use VML to make Outlook not do this? I know Outlook doesn't support @media, but I don't want it to remove them when forwarding an email.
Jim G
Jim G,
I would suggest not forwarding emails from Outlook. Here is a blog about all the problems forwarding can cause: https://www.emailonacid.com/blog/article/email-development/why_forwarding_emails_is_so_bad

There is no way to control what Outlook (or any other program) does when forwarding an email. Instead, you may want to sign up for a professional sending service (like MailChimp or Emma) if you're doing the sending, or simply sign up for these emails using a different account.
Geoff Phillips
We have been using this for some time. We just got some new laptops and noticed that on machines where the display text is set to 150% it messes up the v:fill so that in outlook it only showes two thirds of the image and text. We have our emails 630px wide for outlook. If you set the default back to 100% and restart the machine it then rendors correctly. The laptops arrived with 150% zoom enabled so how many other people have this on? Any ideas on how to fix this?
Chris Harding

Leave a Comment