Vector Markup Language and Backgrounds

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. Why text on image backgriung is not selectable/linkable?

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

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

10. my CMS is stripping out the conditional statement. any way to prevent that??

11. Thanks for info i like it. Great Posting. I’m sharing it to twitter!

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

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

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

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

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

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

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

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

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

    any clue how to fix it?

21. I’m having the same issue as “Alessandro”. Can you please help us fix for Outlook 2010?

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

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

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