Email designers have many techniques to enhance a campaign at their disposal. Visuals such as animated GIFs and gorgeous typography seem to be all the rage in emails today. But one simple design technique that has been around for years can go a long way when it comes to grabbing users’ attention: background images.
Background images are the foundational base of email design. Unlike hero images, which are often the focal point of an email, background images are complimentary to the design and layout. Don’t let their subtlety fool you. Background imagery is an integral part of email design and can pull your graphic elements together.
Perhaps the greatest benefit of using background images is that they give designers the freedom to place additional HTML content on top; think wallpaper with photos and artwork hung on top of it. The layering possibilities allow designers to pack more into a smaller space.
The technical upside of using background images rather than regular images is that HTML content on top of background images remains visible, even when images are disabled. But there’s more: background images aren’t always static. Animated GIFs can be used for the image, which can add a subtle or loud touch to otherwise still emails.
Ready to code?
Before jumping into specific campaigns, email designers should cultivate a library of background images. Start simple and work your way up to something more colorful and bold. Background imagery should enhance your content, not replace it. When designing these images, graphic elements such as patterns and textures can make for an eye-catching base without distracting from other information.
When using background imagery, consider how it will display on mobile devices. Images that are too large can slow down email load times and compromise data plans, so all imagery should be sized for mobile use. Additionally, background images scale down on mobile devices, so it’s important to keep key information in an email as live HTML text so it remains visible even when images are disabled.
Like all elements of email design, background images don’t have equal support among email clients. Email clients such as Apple Mail, Outlook 2000-2003, and Outlook for Mac have stellar background images support, while Outlook 2007-2016 don’t support inline CSS, embedded CSS, and attribute background image coding.
On mobile devices, popular email clients that support background images include iOS Mail, Gmail on iOS and Android, Samsung Mail, Outlook iOS, and more. Email clients that still do not fully support background image coding include Outlook Android, Gmail IMAP, and Android 4.4.
For clients that don’t support background images, you should include a background-color property with a color that contrasts the layered HTML content to ensure that your message is readable.
When designing your next email template, think about adding a little something extra to the background and see if it doesn’t give your campaign a lift.