background-color

Client-by-client behaviour for background-color

Fully supports background-color (15): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook Classic, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

When to use background-color in email

• Painting hero backgrounds and full-width banner cells using <td bgcolor> alongside CSS for double coverage.
• Coloring CTA buttons that need to remain on-brand even when background images are blocked by the recipient's client.
• Establishing alternating row colors in digest-style emails so individual sections remain visually scannable.

Rendering behaviour and edge cases

• Outlook respects background-color when applied directly to <td>, less reliably on <div>; use both the bgcolor attribute and inline CSS for safety.
• Gmail and Yahoo will reverse background-color in dark mode unless the email opts out via meta color-scheme.
• Some clients ignore background-color on rounded buttons unless the parent table also defines it — always set it on the cell, not just the inner element.

Recommended fallback strategy

Always pair background-color with a matching color on text inside the element to avoid contrast collapse during dark-mode inversion. Use the deprecated bgcolor HTML attribute alongside CSS to cover the legacy Outlook path. For images that overlay a colored area, set the cell background-color to match the image's dominant color so blocked images still look intentional.