Vector Markup Language and Backgrounds

37

Background Check

Backgrounds might seem like they should be a Email background check 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('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 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://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> 

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.

Author: Kyle Lapaglia

Author: Kyle Lapaglia

37 thoughts on “Vector Markup Language and Backgrounds”

  1. 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!

  2. 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.

  3. 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).

  4. RWAP01,
    Did you remember to modify the width in all three places? The TD, the v:rect and the v:shape?

  5. 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.

  6. 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.

  7. 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.

  8. I should also mention it’s working great on my responsive template, in all viewports

  9. 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?

  10. 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?

  11. Has anybody figured out how to keep the background-image centered when using this full-width solution? As is, it aligns left.

  12. Hello 🙂

    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 🙂

  13. 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?

  14. 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?

  15. 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.

  16. 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 “

  17. in outlook 2013 it adds a huge space at the bottom of my table.

    any clue how to fix it?

  18. 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.

  19. 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]>


    <!--[if gte mso 9]>



    BLANK
    BLANK
    BLANK
    BLANK
    BLANK
    BLANK
    BLANK
    BLANK
    BLANK
    BLANK

    <!--[if gte mso 9]>


  • Did anyone ever get this sorted? I too am having the same issues with Outlook 2010 My code is:

    <!–[if gte mso 9]>



     

    Welcome Jamie

    Your adventure starts here

    <!–[if gte mso 9]>


  • 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

  • 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!

  • 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”>

    <!–[if gte mso 9]>



    …this is the overlaying table with an image and text over the bg image…

    <!–[if gte mso 9]>

    Any ideas what’s causing the bg image to stack over the overlaying table in it? Thanks in advance!

  • 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.

  • 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


    <html xmlns:v=”urn:schemas-microsoft-com:vml”>
    <head>
    <title></title>
    </head>
    <body>

    <!–[if gte mso 9]>


    Text

    <!–[if gte mso 9]>

    </body>
    </html>

    I am referring to the table that has the “test” classs.

  • 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.

  • 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?

  • 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,
    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.

  • 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?

  • Have been using the bulletproof background solution(mso/vml) since the first of the year and it has been working pretty well in most Outlook 2010 – 2016 versions. But recently discovered that the bulletproof background solution does not appear to be working for Outlook 2016 in Office 365 Plus (Outlook 365?). Has anyone had any luck with background images for the Office 365 Plus version of Outlook 2016? In the mso/vml the background width/height is hard-coded but for some reason in this problematic version of Outlook 2016 for Office 365 Plus, it ignores the hard-coded background dimensions and reduces it and the content over the background to about 10% the width of the email. Thanks

  • Comments are closed.