background-image

Client-by-client behaviour for background-image

Fully supports background-image (12): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

Partial support (1): Yahoo Mail. Expect rendering quirks unique to each engine — partial support typically means a subset of values, an ignored shorthand, or sanitizer-specific rewrites.

No support (2): Outlook (New), Outlook Classic. Plan fallbacks for these clients before relying on background-image in production sends.

When to use background-image in email

• Hero banners with text overlay where the background image is purely decorative.
• CTA buttons with a colorful gradient that needs to look on-brand.
• Card-style layouts where the cell background previews a featured asset.

Rendering behaviour and edge cases

• Outlook on Windows ignores CSS background-image on <td>; you must use VML <v:rect> with <v:fill type="frame" src="..."> for coverage.
• Most clients require background-color to be set as a fallback when images are blocked, or the CTA disappears entirely.
• background-size and background-position are inconsistently supported — design backgrounds that tile or center predictably.

Recommended fallback strategy

Always set background-color alongside background-image as a fallback for blocked or unloaded images. Use VML for Outlook hero backgrounds. Place critical text directly in HTML, not embedded in the background image, so it remains readable when images fail.

Fixes & Workarounds

<td style="background-image: url('hero.jpg');
            background-size: cover; padding: 40px;">
  <h1 style="color: #fff;">Hello World</h1>
</td>

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
  stroke="false" style="width:600px; height:300px;">
  <v:fill type="frame" src="hero.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->
<td style="background-image: url('hero.jpg');
            background-size: cover; padding: 40px;">
  <h1 style="color: #fff;">Hello World</h1>
</td>
<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->