What Most People Miss About Outlook Background Images

By Michael Lee
Most Outlook tutorials claim you *can* add background images to emails — then show you how to paste an image into the message body and call it a day. They’re wrong. That isn’t a background image. It’s just a picture sitting on top of white space. Real background images — tiled, fixed-position, responsive behind text — fail silently in Outlook desktop clients. And if you’ve ever sent one to Sarah Chen (VP Marketing) only to see her reply ‘looks broken on my end’, you already know why.

The Short Version

Method Works in Outlook Desktop? Works in Outlook Web App? Pros Cons
HTML <body background=""> ❌ Outlook 2016/2019/365 (all versions) ✅ OWA (Chrome/Firefox) Simple code; no CSS needed Fails in every desktop Outlook. Ignored silently.
CSS background-image on <div> ❌ All desktop versions ✅ OWA + Edge Full control over position, repeat, size Stripped by Outlook desktop’s HTML sanitizer. No fallback.
VML + table-based background (hybrid) ✅ Outlook 2016/2019/365 ✅ OWA (with minor quirks) Only method that reliably renders in desktop Outlook Complex markup; requires VML syntax; breaks if pasted into Compose window.
Image-as-background via nested tables + <img> as cell background ✅ Outlook 2016+ (limited) ✅ OWA No VML; easier to test; works with drag-and-drop Doesn’t tile or scale well; fails if image URL changes or blocks.

Method 1: HTML <body background="">

This is the oldest trick in the book — slap a path into the background attribute on the <body> tag. You’ll find it in legacy newsletters from 2008. It still validates in basic HTML. But here’s the truth: Outlook desktop (every version since 2013) strips this attribute during rendering. Not warns. Not flags. Just deletes it. The email loads fine — but the background vanishes. To test it yourself: Open Outlook 365 > File > Options > Mail > Compose messages > click Editor Options… > uncheck “Use Microsoft Word to edit email messages”. Now compose a new message in plain HTML mode (not Word). Paste this: 
<body background="https://example.com/bg.jpg">
<p>Hello</p>
</body>
Send it to yourself. Open it in Outlook desktop. Check View > Options > Message Source. You’ll see the background attribute gone — stripped before render. It *does* work in Outlook Web App (OWA) — tested in Chrome, Firefox, and Edge. So if your team lives entirely in browser Outlook, this method gets you 80% there. But if even one person uses desktop Outlook — like IT Help Desk or Finance (they always do) — skip it.

Method 2: CSS background-image

This feels like the obvious modern answer. You write clean CSS: 
div.banner {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
Then apply it to a <div> wrapping your content. Works flawlessly in Gmail, Apple Mail, Thunderbird, and OWA. In Outlook desktop? Zero. Nada. Outlook’s rendering engine (Word 2016/2019/365 engine) doesn’t parse background-image. It doesn’t ignore it — it removes the entire style block. Even inline styles get scrubbed if they contain background-image. Yes, really. Here’s the counterintuitive tip: Don’t try to force it with !important or wrapper divs. Outlook doesn’t care. It’s not a bug — it’s by design. Microsoft chose Word’s rendering engine for stability, not CSS fidelity. So CSS backgrounds are dead on arrival in desktop Outlook. Full stop. If you’re building for OWA-only distribution (e.g., internal comms where everyone uses Chrome + Outlook on web), go ahead. But if your audience includes Sarah Chen (who insists on Outlook 365 desktop because “it syncs with her calendar better”), this method will make her think your team can’t send proper email.

Method 3: VML + table-based background (hybrid)

This is the only method that actually works across Outlook desktop and OWA — but it’s ugly, finicky, and looks like something written in 2004. Why does it work? Because Outlook desktop *does* support Vector Markup Language (VML) — a deprecated Microsoft standard buried deep in its rendering stack. The trick is to wrap your content in a <table>, then use VML <v:rect> and <v:fill> to lay the image behind it. Here’s the minimal working snippet (tested in Outlook 365 v2308, 2019, and 2016): 
<!--[if mso]>

  
  
    
    <div style="width:600px;height:200px;background-color:#f0f0f0;">
      <p>Your content here</p>
    </div>
<!--[if mso]>
  </v:textbox>
</v:rect>
<![endif]-->
Important: This only works when sent as HTML email — not when pasted into Outlook’s Compose window. You must build it in an editor (like VS Code or Email on Acid), save as .htm, then attach or embed via Insert > Object > Text from File (File > Options > Mail > Compose messages > check “Show Developer tab”). Or better: use a dedicated email builder. Also: Outlook 2016 and later require the xmlns:v namespace declaration. Skip it, and the VML won’t render. And yes — the conditional comments <!--[if mso]> are required. Without them, non-Outlook clients try to render VML and break.

Which Should You Choose?

Your Situation Best Method Why
You send to mixed users: some on Outlook desktop, some on OWA VML + table-based background Only method with consistent desktop + web support. Requires build step — but delivers.
You only use Outlook Web App (no desktop installs) CSS background-image Clean, maintainable, and fully supported. No VML overhead.
You’re drafting quick internal notes (not marketing emails) Image-as-background via table cell Paste an image into a table cell, right-click > Format Cell > Fill > Picture. Works for drafts — not for sending.
You need to send a one-off branded email to noreply@company.com (automated system) Skip background images entirely Automated systems often strip or block external images. Use solid colors + bold typography instead.
Michael Lee

Michael Lee

Michael covers the latest in office software updates