Background images can work in HTML email, but they need a fallback background color and special handling for classic desktop Outlook. Use them for atmosphere and supporting visuals not as the only source of essential text, pricing, dates, or calls to action.
The dependable background-image strategy
A production hero normally combines four layers:
- a solid fallback color;
- an HTML
backgroundattribute for older clients; - an inline CSS
background-imagefor modern clients; - VML inside an Outlook conditional comment.
That may look repetitive, but every layer serves a different rendering engine.
Start with a readable fallback
Build the content so it works on a plain color before adding the image:
<td
bgcolor="#0f172a"
background="https://cdn.example.com/email/hero.jpg"
class="bg-slate-900 bg-cover bg-center px-8 py-14 text-white"
style="background-color:#0f172a; background-image:url('https://cdn.example.com/email/hero.jpg'); background-position:center; background-size:cover;"
>
<h2 style="margin:0; color:#ffffff; font-size:32px; line-height:40px;">
Build emails your team can ship
</h2>
</td>
If the image disappears, the heading still has sufficient contrast against #0f172a. The HTML attribute and inline CSS improve coverage without changing the semantic content.
Why Outlook needs VML
Classic Windows Outlook uses the Microsoft Word rendering engine and does not handle CSS backgrounds like a browser. Vector Markup Language (VML) provides a parallel background for those versions:
<td bgcolor="#0f172a" background="https://cdn.example.com/email/hero.jpg"
style="background-color:#0f172a; background-image:url('https://cdn.example.com/email/hero.jpg'); background-position:center; background-size:cover;">
<!--[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://cdn.example.com/email/hero.jpg" color="#0f172a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!-- Live HTML content -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
Use a fixed VML width and height that match the desktop layout. Fluid VML can become fragile, so keep the hero geometry predictable. Our Outlook email guide covers the wider set of Word-engine constraints.
Tailwind’s role
Tailwind is useful for the fallback color, padding, text, and source-level background rules. It does not generate VML or make unsupported CSS work. Keep the conditional Outlook block in a reusable component, then let your compiler inline the normal utilities around it.
<td class="bg-[#0f172a] bg-[url('https://cdn.example.com/email/hero.jpg')] bg-cover bg-center px-8 py-14">
...
</td>
Confirm that your Tailwind scanner sees complete arbitrary-value classes and that the inliner preserves URLs correctly. If dynamic asset URLs make class detection awkward, use an inline style for the image and Tailwind for the stable declarations.
Choose between cover, contain, and fixed positioning
background-size: cover fills the region but crops the image. Keep important visual details away from edges. contain preserves the full image but may reveal empty space. For patterned textures, an explicit size and repeat can be more predictable than either.
Email clients do not reproduce every combination of size, position, and repeat consistently. A simple centered cover image is easier to support than a multi-layered art direction system.
Keep live text above the background
Live HTML text is accessible, selectable, searchable, and visible when images are blocked. It also allows personalization and localization. Ensure the text has enough contrast across every part of the image; a dark translucent overlay cannot be assumed to render everywhere, so bake subtle darkening into the image asset when necessary.
For image sizing, formats, and retina exports, see Tailwind CSS email images.
Make the mobile crop intentional
A wide hero may crop poorly on a narrow phone. You can change background-position or swap the background in a media query, but provide a sane default first. Keep faces, product details, and focal points near the center-safe area.
If the mobile and desktop compositions are fundamentally different, consider using a regular responsive <img> followed by live content instead. It is easier to reason about and usually requires less compatibility code.
Common background-image mistakes
No fallback color. The text becomes unreadable when remote images are blocked.
Critical text inside the artwork. Recipients lose the offer or instruction with the image.
CSS only. Classic Outlook may ignore the background completely.
Unescaped dynamic URLs. Template syntax or spaces can corrupt a style declaration.
Assuming identical crops. Different viewport ratios expose different portions of cover images.
Using a huge file. Background images still affect load time; compress them and export at a realistic maximum size.
When not to use a background image
Use a normal image when the visual itself is content, needs meaningful alt text, or must keep an exact aspect ratio. Use a background when live content genuinely needs to sit above decorative artwork and the fallback remains complete.
Frequently asked questions
Do background images work in Gmail?
Common CSS background patterns work in many Gmail environments, but your message still needs a fallback because client behavior, sanitization, and image blocking vary.
Why is my background missing in Outlook?
Classic Outlook for Windows does not render CSS backgrounds like a browser. Add a VML fallback with an Outlook conditional comment, or replace the background with a normal image.
Can Tailwind generate the Outlook VML?
No. Tailwind styles the standard HTML. Place the VML in a component or template partial and keep it alongside the normal background declaration.
Should text be part of the background image?
No. Keep essential copy and actions as live HTML so the email remains accessible and useful when images fail.
Share with friends