Bulletproof Email Backgrounds: VML and Fallbacks for Outlook

Published July 21, 2026

The background that disappears in Outlook

You design an email with a colored section behind a heading, or a soft hero image behind a call to action. It looks perfect in your preview. Then a colleague on Outlook opens it and the background is simply gone — the text sits on a blank white strip where the color or image was supposed to be. Nothing else changed. Outlook just refused to render it.

This is one of the most reliable ways an email “breaks” in Outlook, and it’s not a bug in your design. It’s a long-standing quirk of how Outlook draws backgrounds. The fix has a name in the email world: a bulletproof background — a pattern that draws the background in a way Outlook will actually honor, without breaking the email for every other client. This article explains what they are, why they’re needed, and what to do about them.

What a bulletproof background actually is

A bulletproof background is an email-development pattern for getting a background color or background image to render in Outlook without losing it in other clients. The pattern layers two things:

1. Standard CSS — the background or background-color style that every modern client (Apple Mail, Gmail, the new Chromium-based Outlook) renders normally.
2. An Outlook-specific fallback — extra markup, visible only to Outlook’s Word-based engine, that draws the same background using a format Word actually understands.

Modern clients read the CSS and ignore the Outlook fallback. Outlook reads the Outlook fallback and ignores the CSS it can’t render. Both end up showing the same background. The name “bulletproof” comes from the email community — it’s the pattern that survives every client, not just the well-behaved ones.

Why Outlook is the holdout

Most email clients render HTML using a browser engine. Outlook on Windows, for the versions from 2007 through 2021 still widely used in business, renders HTML email using Microsoft Word — the word processor — not a browser. (For the full backstory, see Why Outlook, Gmail, and Apple Mail Render the Same Email Differently.)

Word’s engine has very limited support for CSS backgrounds. A plain background-image on a section often renders blank. A background-color on certain elements is sometimes dropped. And Word doesn’t understand the modern CSS that handles layered backgrounds, gradients, or sized background images at all.

The workaround the email industry settled on, years ago, was to draw the background using a different format Word does understand: VML, short for Vector Markup Language. It’s an old Microsoft vector format that Word’s renderer can interpret, and it can describe a filled rectangle — which is exactly what a background is. Email developers wrap that VML inside a small conditional comment, a kind of markup block that only Outlook reads, so every other client skips it cleanly. That’s the bulletproof-background pattern in one sentence: CSS for everyone, VML inside an Outlook-only markup block for Outlook.

Why it matters

Backgrounds aren’t decoration. In a lot of email designs, the background is the structure:

• A colored section is what visually separates the hero from the body.
• A button with a background fill is the call to action — without the fill, it’s just text.
• A full-bleed hero image with text on top only works if both the image and the text render.
• A branded color block behind an offer is what makes the offer pop.

When the background vanishes in Outlook, the email doesn’t just look slightly different — it can lose the visual hierarchy that made it work at all. A button that loses its fill blends into the surrounding text. A hero that loses its image leaves copy floating on white. The reader’s experience degrades sharply, and there’s nothing in the design that signals it’s coming — you only see it when you test in Outlook.

How bulletproof backgrounds work

The pattern is the same in every form, whether you’re applying it to a section, a button, or a full-bleed hero:

1. Start with the standard CSS background. Set background-color and background-image the way you normally would. This handles every client that supports them.
2. Add an Outlook-only fallback. Wrap the fallback in a markup block that only Outlook reads (an mso block) so other clients ignore it. Inside, describe the same background using VML — a <v:rect> filled with the color or image.
3. Match the dimensions. The VML rectangle needs explicit width and height that match the section it sits behind, or Outlook draws it at the wrong size.
4. Place the actual content on top. Outlook stacks the VML behind the foreground content; the text and images sit on top of the background you just drew.
5. Pick your fallback for background images. If the image itself fails to load for any reason, set a fallback background-color close to the image’s average tone, so the text stays readable even without the image.

For a bulletproof button — the canonical example — the same pattern in miniature produces a button with a background fill, rounded corners, and clickable padding that survives Outlook, where a <div> with border-radius and a background fill would render as a flat rectangle with no fill.

Common mistakes

• Relying on CSS alone. A background-image with no Outlook fallback renders blank in classic Outlook. The design depends on a fallback the CSS doesn’t provide.
• Forgetting the fallback color. If your background image fails to load (image blocked, CDN down, slow connection), the text on top needs a readable color underneath. Always set background-color first.
• Low-contrast text on a background image. When the image renders, the text is readable. When the fallback color shows instead, the contrast can disappear. Test the fallback color against the text, not just the image.
• Skipping the Outlook test. A preview in a browser or Apple Mail tells you almost nothing about Outlook. Send a test copy to a real Outlook inbox before you send.
• Heavy background images. Background-image files are part of your total email size, and Gmail clips messages larger than roughly 102KB. Keep the asset small.
• Backgrounds that hide content in dark mode. Some clients invert colors in dark mode; a dark background with dark text can become invisible. See Email Progressive Enhancement for the broader fallback pattern.

How to handle bulletproof backgrounds in Temway

You shouldn’t have to write VML by hand, and in Temway you don’t. Temway is a visual builder: you compose with blocks — sections, text, buttons, images — and Temway compiles each design into the cross-client-safe HTML that email clients actually need. Background colors, background images, and the Outlook-safe fallbacks that keep them rendering are part of what the builder produces on export, not something you add by hand.

The practical workflow:

1. Set your background color or image on the block — section, button, hero — the same way you set any other style.
2. Preview on Desktop and Mobile to confirm the design reads well at both sizes. (For the broader mobile-first pattern, see Responsive Email Design.)
3. Export the HTML or push it to your ESP. The output carries the Outlook-safe fallbacks automatically.
4. Send a test copy to an Outlook inbox to confirm what your readers will actually see.

The deep value isn’t just that the markup is correct. It’s that you don’t have to know any of this to ship email that renders correctly. If you’re building a hero-heavy design — say, a year-in-review newsletter with a stat-card hero like the Your Year in Numbers — SaaS template — the background colors on the hero, the call to action, and the footer all need to survive Outlook. A builder that handles those fallbacks for you means you design the visual you want, and the cross-client safety is included.

Temway is a builder and exporter. Once the HTML is right, you send it from your ESP — that’s where your subscriber list, sender reputation, and delivery live.

Frequently asked questions

What is a bulletproof email background?

A bulletproof email background is a pattern for getting a background color or background image to render in Outlook, where plain CSS backgrounds often disappear. It layers standard CSS for modern clients with an Outlook-specific fallback drawn in VML, so the same background shows in every client.

Why do background images disappear in Outlook?

Because desktop Outlook on Windows renders email using Microsoft Word’s engine, not a browser, and Word has very limited support for CSS backgrounds. A plain background-image often renders blank. The fix is an Outlook-specific fallback that draws the background in a format Word understands.

Do I need to write VML by hand?

Not if you use a visual email builder. Hand-writing VML is fragile and easy to get wrong, and most teams stopped doing it years ago. A builder that compiles your design into cross-client-safe HTML produces the Outlook fallback automatically, so the design renders correctly without you touching the markup.

What’s the difference between a bulletproof background and a regular background?

A regular background is just a CSS background or background-color style. It works in modern clients and vanishes in classic Outlook. A bulletproof background adds an Outlook-specific fallback on top of the CSS, so the background renders in Outlook too. The CSS handles the easy clients; the fallback handles the hard one.

Should I use background images in email at all?

Yes, with two precautions: always set a fallback background-color close to the image’s average tone, so text stays readable if the image fails to load, and keep the image file small enough that it doesn’t push the email past Gmail’s roughly 102KB clipping limit. With those two in place, background images are a normal, safe part of email design.

Where to go next

• Understand why email clients render so differently in Email Client Rendering Differences.
• Learn why email still relies on tables for layout in Why HTML Emails Still Use Tables.
• See the broader fallback philosophy in Email Progressive Enhancement.
• Understand why styles move inline on each element in CSS Inlining in Email.
• Explore the block-based way to build in the email blocks reference.
• Start from a hero-heavy design like the Your Year in Numbers — SaaS template, or browse the full templates gallery.