[FAQ]

I’m a junior designer based in London, and I’m trying to improve the design of our company’s email newsletters.

I want to add a full-width background image that sits behind our main content, but I’m having a lot of trouble getting it to display correctly across different email clients, especially Outlook. I’ve tried the simple CSS background-image property, but it doesn’t seem to be reliable.

What is the best and most “bulletproof” method for coding a background image in an email so that it works consistently everywhere?

[Jeff Bullas]

A classic email design challenge.

Brief Answer: To add a background image reliably across all email clients, you need a ‘bulletproof’ coding method that combines standard HTML background attributes with a special VML code block specifically for older versions of Microsoft Outlook.

This two-part approach is necessary because you have to code defensively for email, providing fallbacks for clients that don’t support modern standards.

The reason this is so difficult is that many versions of Microsoft Outlook do not properly support CSS for background images, which is what web pages use. To get around this, you must first apply your background image using the standard HTML background attribute on your main layout table; this will work for most clients like Apple Mail and Gmail. Then, you must add a second piece of code specifically for Outlook. This code uses something called Vector Markup Language (VML) to essentially draw a shape, fill that shape with your background image, and then place your email’s text and other content on top of it.

When choosing your background image, ensure it is large enough in its dimensions to not look pixelated on wide screens, but also heavily optimised to have a small file size to ensure your email loads quickly. It is also critical to set a solid fallback background colour in your code. This ensures that if a user’s email client blocks images by default, your text will still be readable against a suitable colour. Finally, always make sure there is very high contrast between your background image and your foreground text to maintain readability and accessibility for all users.

Cheers, Jeff

[Author]

Posts