4

I'm using VML for a background image in an html email. The background repeats in MSO 12, 14, and 15, despite a "no-repeat" value in the VML object. Code below:

<td align="center" valign="top" style="background-image: url('http://secure.sportssystems.com/eventdata/6389/images/APIInviteBackground.jpg'); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top center;">
    <xsl:comment><![CDATA[[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="background-repeat: no-repeat; mso-width-percent:1000; height:775px; top: 0; left: 0; border: 0;z-index: 1">
             <v:fill type="tile" src="cid:http://.../myimage.jpg" />
    <![endif]]]></xsl:comment>

I've also tried using v:background:

<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t" style="background-repeat: no-repeat; mso-width-percent:1000; height:775px;">
    <v:fill type="tile" src="cid:http://secure.sportssystems.com/eventdata/6389/images/APIInviteBackground.jpg" />
</v:background>

But then I get no background. I'll keep plugging, as I have a feeling the solution is something simple, but would appreciate any help...

Cmaso
  • 1,095
  • 1
  • 10
  • 23

2 Answers2

16

Change <v:fill type="tile" to <v:fill type="frame" and make sure that you have the rect the same size as the td. Using MSO-width-percent can be glitchy to a degree. As it would only be rendered on the desktop version, you should have no real issues declaring a preset value for this conditional code and I would recommend doing this.

Gortonington
  • 3,557
  • 2
  • 18
  • 30
  • 1
    This worked for me. I had been struggling for hours and the image i had put in the table background was getting stretched horizontally in Outlook for Windows but displaying correctly in Outlook Online. But changing "tile" to "frame" worked like a magic. Thanks a million – Balaji Birajdar Dec 23 '18 at 18:24
  • 1
    This solution also worked for me. I owe you a beer! – jpisty Mar 12 '19 at 08:00
  • Too bad you can't use cover. Only stretch or tile :/ – Adam Apr 03 '19 at 08:56
  • @Adam: See https://www.hteumeuleu.com/2021/background-properties-in-vml/ and the `aspect="atleast"` and `aspect="atmost"` parts. – biziclop Mar 04 '21 at 12:18
5

By specifying a size attribute in the <v:fill> element to "100%,100%" I was able to get my image to stretch and not repeat.

Put the following code right after the opening body tag:

<body>
<div>
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
    <v:fill type="tile" size="100%,100%" src="http://image.mail.minacsmarketing.com/lib/fe9912727d65017d75/m/1/test-bg.jpg"/>
</v:background>
<![endif]-->
    <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td>

Then close your code with the following code right before the closing body tag:

    </td></tr>
    </table>
</div><!--/end container div-->
</body>

Note: your question was for Outlook 2007 and up, for which this works. This solution will not work for Outlook.com emails, as they do not support VML code.

josh1978
  • 698
  • 7
  • 19
  • Thank you very much! It also helped me with dpi related issues when image was looking bigger in VML. – Cypher Nov 01 '20 at 03:21