Email Development
Vector Markup Language and Backgrounds
Email Development
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.
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('https://www.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-Background.png');"
background="https://www.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-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="https://www.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-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>
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('https://www.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-Background.png');background-repeat:repeat-x; background-position: bottom left;"
background="https://www.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-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="https://www.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-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.
