Outlook VML background image generator
Desktop Outlook ignores CSS background-image — its Word engine needs VML. Configure a hero or section background below and copy markup that renders in Outlook 2007–365 and every other client.
Outlook reads the VML <v:image>; every other client reads the CSS background-image. With images off, both fall back to your solid color.
<!-- Bulletproof background image — Outlook (VML) + all other clients -->
<div style="background-color:#1f2933;">
<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;" src="https://picsum.photos/600/300" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position:absolute;width:600px;height:300px;">
<v:fill opacity="0%" color="#1f2933" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!--[if mso]><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"><tr><td><![endif]-->
<div style="background-image:url('https://picsum.photos/600/300');background-position:center center;background-size:cover;background-color:#1f2933;max-width:600px;height:300px;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" height="300">
<tr><td align="center" valign="middle" style="padding:24px;">
<h1 style="margin:0;font-family:Arial,sans-serif;font-size:28px;line-height:36px;font-weight:bold;color:#ffffff;text-align:center;">Summer sale is live</h1>
</td></tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</div>Frequently asked questions
Why don't background images show in Outlook?
Desktop Outlook on Windows uses the Microsoft Word rendering engine, which ignores the CSS background-image property. The fix is VML: a <v:image> and <v:rect> block, wrapped in an <!--[if mso]--> conditional comment, that Word does understand.
What is VML in email?
VML (Vector Markup Language) is a legacy Microsoft markup that Outlook's Word engine still renders. Email developers use it to reproduce rounded buttons and background images that CSS alone can't deliver in Outlook.
Do I still need a fallback color?
Yes. Many clients block remote images until the recipient clicks 'show images', and accessibility settings can disable them entirely. A solid fallback background color keeps overlay text readable when the image doesn't load.
Dropping this into a full email? Check the whole thing renders across Gmail, Outlook, Apple Mail and 12 more before you send.