How keep background image from repeating in Outlook 2007 and up

outlook vml

20,251

Solution 1

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.

Solution 2

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.

20,251

Author by

Cmaso

Updated on August 04, 2020

Comments

Cmaso over 3 years

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

Balaji Birajdar over 5 years

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
jpisty about 5 years

This solution also worked for me. I owe you a beer!
Adam about 5 years

Too bad you can't use cover. Only stretch or tile :/
Cypher over 3 years

Thank you very much! It also helped me with dpi related issues when image was looking bigger in VML.
biziclop about 3 years

@Adam: See hteumeuleu.com/2021/background-properties-in-vml and the aspect="atleast" and aspect="atmost" parts.