Email Background Image

Definition

An email background image is an image displayed behind text or other content within an email table cell, column, or full container. Unlike web development, where CSS background-image is universally supported, email background images face significant rendering limitations particularly in Microsoft Outlook. Outlook (2007–2021) uses Word's HTML rendering engine, which does not support CSS background-image on most elements.

The standard technique for background images in email uses a layered approach. For clients that support CSS background images — including Apple Mail, iOS Mail, Samsung Mail, and Thunderbird — the background or background-image property on a table cell works reliably. For Outlook, a Vector Markup Language (VML) fallback using v:rect and v:fill elements provides equivalent functionality. This bulletproof approach ensures background images display across all major email clients.

The full-width hero background image is the most common use case in email marketing. A background image spans the entire width of the email, often with a headline and call-to-action button overlaid. Without proper VML coding, Outlook would simply display the fallback background colour, breaking the design. Modern techniques also support background images on individual buttons, columns, and sections for more sophisticated layouts.

Best Practices

Always specify a fallback background colour that provides adequate contrast with overlaid text. If images are blocked or VML fails in a particular client, the background colour ensures the text and CTA remain legible.

Use VML for Outlook background images by wrapping the v:rect and v:fill elements inside an <!--[if mso]> conditional comment. Include the standard CSS background for all other clients outside the conditional.

Test background images with images disabled to verify that fallback colours create a readable layout. Approximately 43% of email opens occur with images blocked, so the no-image experience must be functional.

Keep background image files small. Background images are often large hero images; compress them aggressively and serve them at reasonable dimensions (typically no wider than 600–640 pixels for email).

Do not place critical text or calls to action solely on background images. Overlay live text with sufficient padding and a semi-transparent background or text shadow to ensure readability when the background image does not load.