Background Images in Outlook: The VML Fix That Started With Outlook 2007

Yes, background images can show in Outlook for Windows. The classic desktop app still needs extra code, though. Classic Outlook for Windows has rendered email with Microsoft Word’s engine since Outlook 2007, and a common way to get a background image behind live content there is to draw it in VML (Vector Markup Language) inside Microsoft Office conditional comments. The new Outlook for Windows, Outlook on the web and Outlook.com use a browser-based engine. They show normal CSS background images and skip the VML. Two things have changed since this trick first spread in 2010: the standard markup moved from v:image to a v:rect with a v:fill, and Microsoft is moving users to the new Outlook, although classic Outlook stays supported until at least 2029.

Why background images broke in Outlook 2007

Outlook 2007 swapped Internet Explorer’s rendering engine for Microsoft Word’s, and Word could not show CSS or HTML background images. For about three years after that, designers and marketers learned to leave background images out of their email designs. Most teams put up with Outlook’s limits, and email design was held back as a result.

That changed in 2010. The original post broke the news like this: “It has recently been discovered by a user of CampaignMonitor that background images can indeed display in Outlook 2007.” It took some hacking, of course.

The original three-step hack (2010 history)

The first version of the fix used VML, an old Microsoft vector format that Word still understood. The steps are below with their syntax corrected. As first published, the code had curly quotes, a missing closing brace, broken comment markers and relative image paths, and none of those work in a sent email.

1. Add the VML namespace to your html tag:

<html xmlns:v="urn:schemas-microsoft-com:vml">

2. Inside your style tag, add this selector:

v\:* { behavior: url(#default#VML); display: inline-block; }

3. Inside your table cell, layer a VML image behind a VML shape that holds your text:

<td width="600" height="402" valign="top" bgcolor="#000000" background="https://example.com/images/yourimage.gif">
 <!, [if gte mso 9]>
 <v:image id="image" style="position:absolute; height:402px; width:600px; top:0; left:0; border:0; z-index:1;" src="https://example.com/images/yourimage.gif" />
 <v:shape id="text" style="position:absolute; height:402px; width:600px; top:0; left:0; border:0; z-index:2;">
 <![endif], >
 <p align="center" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px;">This is the text in front of the background image.</p>
 <!, [if gte mso 9]>
 </v:shape>
 <![endif], >
</td>

Put together, those three steps made background images render in Outlook 2007 for the first time. The background attribute and bgcolor covered every other client. The gte mso 9 conditional comment meant only Microsoft Office clients with a Word version of 9 or later read the VML, and Word-based Outlook is one of them.

The method that replaced it

These days the commonly used pattern is a v:rect (a rectangle) with a v:fill for the image and a v:textbox for your live content. Skip the absolutely positioned v:image and v:shape pair. The old version stacked two shapes with z-index, and it was hard to control once the cell held more or less content than the image’s fixed height. The rectangle version keeps the image and the content in one shape. It is also what Campaign Monitor’s Bulletproof Background Images tool (backgrounds.cm) generates.

Current markup for a single cell

<td background="https://example.com/images/hero.jpg" bgcolor="#000000" width="600" height="402" valign="top"
 style="background-image:url('https://example.com/images/hero.jpg'); background-size:cover; background-position:center;">
 <!, [if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:402px;">
 <v:fill type="frame" src="https://example.com/images/hero.jpg" color="#000000" />
 <v:textbox inset="0,0,0,0">
 <![endif], >
 <div>
 <p style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px; text-align:center;">This is the text in front of the background image.</p>
 </div>
 <!, [if gte mso 9]>
 </v:textbox>
 </v:rect>
 <![endif], >
</td>

Each part has a job:

• CSS background-image is what the new Outlook, Outlook.com, Gmail, Apple Mail and most other modern clients read.
• background and bgcolor attributes are older HTML fallbacks. The color shows if images are blocked.
• v:rect draws the shape for classic Outlook. Its width and height should match the cell.
• v:fill type="frame" stretches one copy of the image to fill the shape. type="tile" repeats it, which you want for patterns and not for photos.
• v:textbox holds your real HTML text, so the message still reads with images off.

Many templates still put the v\:* behavior selector from the 2010 hack in the head. It is a leftover and does no harm if you keep it.

Rules that keep it working

1. Use absolute image URLs. Relative paths such as images/yourimage.gif break once the email leaves your server.
2. Match the dimensions. Use the same width and height on the td, the v:rect and your image, or Outlook will crop or stretch it.
3. Don’t nest VML. Campaign Monitor’s tool notes say bulletproof backgrounds and buttons can’t sit on top of another VML background, because Outlook doesn’t support nested VML elements.
4. Keep the image file lean. Campaign Monitor has warned that Outlook can crash on a background image it treats as too big, so test in a real copy of Outlook.
5. Hard-code the image. Campaign Monitor’s tool notes say these backgrounds can’t be made editable with template tags, so the URL has to be in the code.
6. Keep text live. Never bake your headline or call to action into the background image. Image blocking can stop the image from showing at all, and screen readers generally skip decorative background images.

Which Outlook versions still need VML

VML matters only for Word-based Outlook: the classic Windows desktop app, from Outlook 2007 to today’s classic Outlook in Microsoft 365. That’s where it is the usual way to get certain background-image effects. Every other Outlook reads normal CSS.

Outlook versions that are past end of support still open email. They just get no fixes, so people keep using them in offices for a long time. That’s why you should keep the VML in your templates even as the new Outlook spreads.

Test before you send

The original post ended by asking readers to try the code and report problems in the comments or on the original thread at Campaign Monitor. That advice still holds, with better tools. Preview your template in a rendering service or your ESP’s inbox preview, and check these clients:

1. Classic Outlook for Windows, ideally on Microsoft 365 and one older version.
2. The new Outlook for Windows, to confirm the CSS background shows and the VML stays hidden.
3. Gmail on the web and the Gmail mobile app.
4. Apple Mail on iPhone and Mac, in both light and dark mode.
5. A version with images turned off, so you can confirm the bgcolor and live text still carry the message.

Dark mode needs its own check. Clients can recolor your fallback color and text and leave the image alone. White text that read fine over a dark photo can end up on a light background.

FAQ

Does the new Outlook for Windows need VML for background images?

No. The new Outlook for Windows uses a web-based engine and shows CSS background-image the way Outlook on the web does. It skips the VML inside your gte mso 9 comments. Keep both in your template, because classic Outlook is still widely installed and supported until at least 2029.

Why does my background image repeat or stretch in classic Outlook?

Repeating usually means the v:fill uses type="tile" or has no type set. For a single photo, set type="frame". Stretching means the v:rect size doesn’t match the image’s proportions, so give the shape the same width and height as the image and the cell.

Can I use background-size: cover in classic Outlook?

No. Word-based Outlook ignores CSS background properties completely. A v:fill with type="frame" fills the rectangle, so the closest you can get is a shape sized to the image’s exact proportions. Other clients will still use your background-size and background-position CSS.

Do background images hurt deliverability?

The image itself won’t land you in spam. An email that is mostly images with little live text can look spammy, though, and it won’t make sense when images are blocked. Authentication and complaints matter far more. Since February 2024, Gmail and Yahoo have required senders of about 5,000 or more messages a day to use SPF, DKIM and DMARC, offer one-click unsubscribe and keep spam rates below 0.3%. Microsoft added similar rules for Outlook.com from May 5, 2025.

Is it still worth coding VML backgrounds in 2026?

That depends on your list. Business audiences tend to have many classic Outlook users, and many consumer lists have very few. Check the email client report in your ESP, and remember that Apple Mail Privacy Protection inflates Apple opens, which skews those reports. If classic Outlook is a real share of your audience, keep the VML. If not, a solid bgcolor fallback with live text may be enough.

Sources

• Campaign Monitor, “Applying a background image to HTML email” (first published December 2010, updated April 2019)
• Campaign Monitor, Bulletproof Background Images tool (backgrounds.cm) and its notes
• Microsoft Support, “End of support for Office 2021”
• Microsoft Support, “Windows Mail, Calendar and People are becoming new Outlook”
• Microsoft Tech Community, “Strengthening email ecosystem: Outlook’s new requirements for high-volume senders”
• Google, Gmail Help: “Email sender guidelines FAQ”