Bulletproof Email Background Images in Outlook: VML v:rect Guide

1. Why Background Images Fail Silently in Classic Outlook

Unlike web browsers or Apple Mail (which run on WebKit) and Gmail (which runs on Blink), desktop versions of Microsoft Outlook for Windows rely on the Microsoft Word print rendering engine (often termed MSO). Word treats HTML documents as print documents, not dynamic web pages. For an exhaustive breakdown of cross-engine rendering quirks, see our developer field guide to common email rendering bugs.

Telemetry from the Emailens Engine shows that Word executes an aggressive CSS sanitization pass before rendering:

• It completely strips background-image declarations from inline styles.
• It drops the legacy HTML background="..." attribute on <table> and <td> tags.
• It strips CSS gradients (linear-gradient and radial-gradient).

The danger lies in development previews. Because browser-based preview tools, Figma email plugins, and local servers render both background-image and the HTML attribute natively, developers assume the email works. When delivered to a corporate recipient on Outlook 2019, the background simply disappears.

<!-- ❌ Broken: Disappears completely in Classic Outlook (Word Engine) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td
      background="https://example.com/hero.jpg"
      style="background-image: url('https://example.com/hero.jpg');
             background-size: cover;
             background-position: center;
             padding: 48px 24px;
             text-align: center;"
    >
      <h1 style="color: #ffffff; margin: 0 0 16px;">Summer Launch Event</h1>
      <p style="color: #ffffff; margin: 0;">Join us live on October 15th.</p>
    </td>
  </tr>
</table>

<!--
Result in Apple Mail, Gmail, & iOS: Renders beautiful hero image ✓
Result in Outlook 2016/2019/365 Windows: Strips background-image and background="..."!
If no fallback background-color is set, white text renders over white background: completely invisible! 💥
-->

2. The Classic VML Formula: v:rect, v:fill, and v:textbox

To render background graphics in Word, we use Vector Markup Language (VML), an XML-based vector format standardized by Microsoft in 1998. While deprecated in Internet Explorer 10, Word continues to support VML natively for drawing shapes and image fills.

The canonical bulletproof pattern (originally pioneered by Stig Mortensen at Campaign Monitor) wraps three core VML elements inside an MSO conditional comment:

• <v:rect>: Draws a rectangular vector shape. Must declare the VML namespace xmlns:v="urn:schemas-microsoft-com:vml", fill="true", stroke="false", and explicit width and height in its style attribute.
• <v:fill type="frame">: Instructs VML to fill the shape with a bitmap image. The attribute type="frame" fits the image to the box (mirroring CSS background-size: cover). The color attribute provides the fallback tint while the image downloads.
• <v:textbox inset="0,0,0,0">: Acts as the container for child HTML. Crucially, the inset="0,0,0,0" attribute resets Word's default internal margins to zero. Without this, Word adds an unwanted 7.2pt padding on all sides.

<!-- ✅ Bulletproof VML Background Pattern for Classic Outlook -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td
      align="center"
      valign="top"
      bgcolor="#1e1b4b"
      background="https://example.com/hero.jpg"
      style="background-image: url('https://example.com/hero.jpg');
             background-position: center center;
             background-size: cover;
             background-color: #1e1b4b;"
    >
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
        style="width: 600px; height: 320px;">
        <v:fill type="frame" src="https://example.com/hero.jpg" color="#1e1b4b" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div style="max-width: 600px; margin: 0 auto;">
        <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center" style="padding: 48px 24px; text-align: center;">
              <h1 style="margin: 0 0 16px; font-family: Arial, sans-serif; font-size: 28px; line-height: 36px; font-weight: bold; color: #ffffff;">
                Summer Launch Event
              </h1>
              <p style="margin: 0; font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color: #e2e8f0;">
                Join us live on October 15th for the keynote announcement.
              </p>
            </td>
          </tr>
        </table>
      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

3. The Dual-Shape Pattern: Preventing Opacity and Text Bleed

While the classic single-rect pattern works well for simple cards, it exhibits a known rendering bug in certain Office 365 desktop builds: applying opacity or color filters to <v:fill> can cause the background color to bleed into child text nodes, reducing contrast.

To solve this, modern email generators, including our free Outlook VML Background Generator , use a Dual-Shape Layered Pattern. This decouples the image rendering from the text host container:

<!-- ✅ Dual-Shape VML Pattern (Used by Emailens Generator) -->
<!-- Prevents text opacity bleed and guarantees sharp layering -->
<div style="background-color: #0f172a;">
  <!--[if mso]>
  <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
    style="width: 600px; height: 300px;" src="https://example.com/hero.jpg" />
  <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="#0f172a" />
    <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://example.com/hero.jpg');
                background-position: center center;
                background-size: cover;
                background-color: #0f172a;
                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;">
              Save 30% On Your Upgrade
            </h1>
          </td>
        </tr>
      </table>
    </div>
    <!--[if mso]></td></tr></table><![endif]-->
  </div>
  <!--[if mso]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</div>

In this architecture, <v:image> renders the underlying photograph as a dedicated background canvas. Immediately following it, an absolutely positioned <v:rect> with an invisible fill (opacity="0%") hosts the <v:textbox>. This guarantees zero color contamination between the image layer and your typography.

4. Full-Bleed Fluid Heroes Across Desktop and Mobile

A frequent design requirement is a full-bleed hero: a background image that spans 100% of the viewport on wide screens, with the text content centered in a 600px column.

In CSS, this is straightforward: a wrapper <table width="100%"> holds the background, while an inner <div style="max-width: 600px; margin: 0 auto;"> constrains the text. But Outlook ignores both width: 100% on VML shapes and max-width on divs.

The solution requires two Outlook-specific techniques combined:

• mso-width-percent: 1000: Word expresses percentage widths in tenths of a percent. Setting style="mso-width-percent: 1000;" on the <v:rect> commands Word to expand the vector rectangle to exactly 100% of the reading pane.
• Internal Ghost Tables: Inside the <v:textbox>, nest an MSO conditional table with width="600" to prevent your headlines from stretching edge-to-edge on large desktop monitors. See our detailed guide on Outlook ghost tables & fluid hybrid layouts.

<!-- ✅ Fluid 100% Full-Bleed VML Hero Banner -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td
      align="center"
      valign="top"
      bgcolor="#064e3b"
      background="https://example.com/banner-wide.jpg"
      style="background-image: url('https://example.com/banner-wide.jpg');
             background-position: center top;
             background-size: cover;
             background-color: #064e3b;"
    >
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
        style="mso-width-percent: 1000; height: 260px;">
        <v:fill type="frame" src="https://example.com/banner-wide.jpg" color="#064e3b" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <!-- Center content inside 600px reading width -->
      <div style="max-width: 600px; margin: 0 auto;">
        <!--[if mso]><table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
        <div style="padding: 40px 20px; text-align: center;">
          <h2 style="margin: 0; font-family: Arial, sans-serif; font-size: 24px; color: #ffffff;">
            Full-Bleed Header Across All Screens
          </h2>
        </div>
        <!--[if mso]></td></tr></table><![endif]-->
      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

5. High-DPI Windows Scaling & Retina Images (The 120 DPI Bug)

One of the most insidious bugs in email rendering occurs on Windows laptops with high-resolution displays (e.g. Surface devices or 4K monitors). Windows sets display scaling to 125%, 150%, or 200%.

When Classic Outlook runs under 120 DPI (125% scaling) or 144 DPI (150% scaling), Word recalculates pixel values. If your VML code declares style="width: 600px; height: 300px;", Outlook scales the VML canvas to 750px or 900px, causing the hero banner to balloon out of proportion or distort aspect ratios.

To neutralize high-DPI scaling bugs and keep VML backgrounds pixel-crisp across all Windows devices:

• Declare PixelsPerInch in <head>: Inject Word's <o:PixelsPerInch>96</o:PixelsPerInch> directive inside an MSO conditional comment in the email <head>. This forces Word to retain a 96 DPI baseline, preventing shapes from ballooning when Windows scaling is set to 125% or 150%.
• 2x Retina Asset: Export your background image at double resolution (1200x600 for a 600x300 hero), but specify the 1x dimensions (600px and 300px) in both the HTML attributes and VML style tags.
• XML Schema Namespaces: Ensure your email's outer <html> tag includes both the VML and Word namespaces: xmlns:v="urn:schemas-microsoft-com:vml" and xmlns:w="urn:schemas-microsoft-com:office:word". Word uses the office:word schema to interpret scaling rules properly.
• Integer Dimensions: Never use fractional pixels or decimal values in VML styles. Always round to integers to prevent sub-pixel rounding crashes.

<!-- Place inside the <head> of your email HTML -->
<!-- Enforces 96 DPI coordinate baseline on 120 DPI & 144 DPI Windows displays -->
<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

6. The Fatal Pitfall: VML Shape Nesting

This is the single most common reason developers report that their VML hero background “broke Outlook entirely.”

In email development, bulletproof rounded buttons are frequently built with VML using <v:roundrect>. If a designer puts a rounded CTA button inside a hero section with a background image, developers naturally place the button code inside the hero section.

Outlook strictly forbids nesting VML shapes. In the Emailens Engine VML analyzer (vml-checker.ts), shape elements (v:rect, v:roundrect, v:oval, v:image) are tracked as a stack. When Outlook encounters one shape inside another (for example, a <v:roundrect> inside the <v:textbox> of a <v:rect>), Word's rendering engine corrupts its internal layout state.

Empirical testing with probe fixtures in the Emailens test suite reveals two distinct, severe failures:

• 1. The container shape vanishes: The parent <v:rect> does not render at all. Its image fill and bounding geometry disappear completely, leaving the inner content stranded without its background canvas.
• 2. Downstream VML text suppression (the blast radius): The damage is not confined to the hero section. Every VML shape further down the entire email stops drawing its text. Buttons and badges located hundreds of pixels below the hero turn into blank colored boxes without visible labels. Emailens verified this with byte-identical probe buttons placed before and after a nested shape: the probe before renders its label, while the identical probe after drops its text completely.

The debunked myth: Email lore frequently claims that shape nesting terminates the table structure early, causing content to spill outside the email frame. Testing against real Word engine builds proves the table structure remains intact; only the VML background fills and subsequent VML text nodes are destroyed.

<!-- ❌ Fatal Pitfall: Nesting a VML Button inside a VML Background -->
<!-- Outlook strictly forbids shape nesting: crashes the Word rendering tree -->
<!--[if gte mso 9]>
<v:rect ... style="width: 600px; height: 350px;">
  <v:fill type="frame" src="hero.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <h1>Hero Title</h1>
  <!-- 💥 NEVER DO THIS: <v:roundrect> inside <v:rect> -->
  <!--[if mso]>
  <v:roundrect href="https://example.com" ...>
    <center>Click Me</center>
  </v:roundrect>
  <![endif]-->
<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

<!-- ✅ Fixed: Use a bulletproof table-cell button inside the hero instead -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin: 20px auto 0;">
  <tr>
    <td
      align="center"
      bgcolor="#6d28d9"
      style="border-radius: 6px; background-color: #6d28d9;"
    >
      <a
        href="https://example.com"
        style="display: inline-block; padding: 12px 28px; font-family: Arial, sans-serif;
               font-size: 15px; font-weight: bold; color: #ffffff; text-decoration: none;"
      >
        Explore Product &rarr;
      </a>
    </td>
  </tr>
</table>

The fix is straightforward: whenever an interactive CTA button is placed inside a VML background container, do not use a VML button. Instead, use a standard table-cell button with inline padding and border-radius. Modern clients render the rounded corners, while Outlook renders a clean, functional rectangular button without crashing the VML background container.

7. Interactive Tool & Live Testing Workflow

Writing raw VML by hand is error-prone. A single missing namespace, unclosed conditional tag, or mismatched height will silently destroy Outlook rendering.

To streamline your production workflow, use the free Outlook VML Background Generator. It provides:

• Pre-configured presets for Hero Headers, Promo Cards, Announcement Banners, and Compact Notices.
• Automatic dual-shape layering to prevent text bleed and opacity artifacts.
• Live desktop and mobile side-by-side rendering simulation.
• One-click copy-paste HTML ready for your email service provider.

Once generated, validate your template through the Emailens CSS Compatibility Checker or run a full 21-client rendering audit to verify pixel-perfect fidelity before launch.