Vector Markup Language and Backgrounds
Table of content
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">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('https://media.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-Background.png');"
background="https://media.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://media.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> 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 thev: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://media.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-Background.png');background-repeat:repeat-x; background-position: bottom left;"
background="https://media.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://media.emailonacid.com/wp-content/uploads/2018/05/Logo_Light-Background.png" color="#f6f6f6" />
</v:rect>
<![endif]-->
</td>
</tr>
</table> 
