Fix Outlook Backgrounds: How to Use VML in HTML Emails
Table of contents
If you stopped building after html email media queries, your email would look great on an iPhone and acceptable on most desktop clients. However, it would fail critical stress tests in the real world. In this final chapter, we add the "bulletproofing"—the specific code blocks that fix notorious bugs in Outlook html emails and Gmail that standard HTML cannot address.
1.1 Outlook VML Backgrounds (The "Paint" Layer)
Concept: In standard web development, applying a background color is as simple as adding background-color: #E8E8E8; to your <body> tag.
In your basic HTML email template, Microsoft Outlook for Windows is unreliable. While it usually respects the body background color on the initial open, it frequently fails when an email is forwarded or viewed in specific reading panes. This results in your carefully chosen background color disappearing, leaving a stark white background that ruins your design's framing.
To guarantee a full-width background color that persists in Outlook, we must use VML (Vector Markup Language). VML is a legacy XML language used by Microsoft Office. We are essentially instructing the Outlook rendering engine to "paint" a solid vector rectangle immediately behind your actual HTML table structure.
This requires code in two different places in your document.
Part A: The Namespace Declaration
First, you must tell the browser inside the <html> tag that you intend to use VML.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
- Analysis: The attribute
xmlns:v="urn:schemas-microsoft-com:vml"is essential. Without defining this namespace, Outlook will not recognize the VML tags used in Part B.
Tabular is a no code email builder designed to create professional email templates that work across all major email clients.
Part B: The VML "Paint" Block
This code block must be placed immediately following the opening <body> tag, before your main wrapper table starts.
Code From The Template (Lines 104-110):
HTML
<body id="body" class="t434" style="min-width:100%;Margin:0px;padding:0px;background-color:#E8E8E8;">
- ``: This is a Microsoft Conditional Comment. It acts as a gatekeeper. Every other email client (Gmail, Apple Mail, Yahoo) sees this as a standard HTML comment and ignores it entirely. Only Microsoft Office (Outlook) rendering engines execute the code inside.
<v:background>: This VML tag initializes the background layer. We setfill="true"andstroke="false"to create a solid block of color without a border outline.<v:fill color="#E8E8E8"/>: This explicitly defines the hexadecimal color for the VML shape.
The Critical Maintenance Rule: Note that the color #E8E8E8 is defined in the CSS on the <body> tag AND inside the VML tag. If you change your background color later, you must update both.