• Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Discussions
  • Snippets
  • Templates
  • Jobs

    Understanding Background Images in Email

    • Posted by Benjamin Carver

    Email designers often find themselves needing to use actual text on top of an image. While many bake the text right into the image itself, enlightened designers understand that many email clients block images by default. They need to ensure that, regardless of images being disabled, their message contained in that text will be visible to subscribers.

    One solution is to use background images. Background images allow you to display an image with live text on top, splitting the two so that copy is always visible. However, background images aren't supported across all email clients. Furthermore, using background images and background colors introduces a few issues as well. This article will go over some of the problems and solutions of using background images in email.

    Background Image Behavior in Email

    On the web, you can force certain behaviors on a background image with various declarations—from stretching it to conform to its container to applying grayscale filters. However, with email, only a few of these commands will be respected, and not across all email clients. Understanding how background images behave in email is a valuable tool in any email marketing designer's arsenal.

    Right now, there are two things to assume when assigning a background image to a table cell in an email:

    1. The background image will repeat on both the X and Y axis.
    2. The background image will align it's left edge to the left edge of it's containing table cell.

    Certain modern email clients like Apple Mail and mobile email clients can understand certain css declarations, like center aligning a background image to their container, but these are the exceptions to the rule. Sticking to known behaviors will alleviate a lot of frustration.

    Problems with Background Images and Colors

    A few years back, it was discovered that adding a background color or image directly to the <body> tag of an email will allow this background property to correctly render in Outlook 07/10/13, as well as a vast majority of other email clients, thus was considered a preferred method.

    However, this methodology also yields what I call the 'Black Reply' issue.

    Imagine you send an email with a dark, or even pure black background using the <body> tag method. Now, whenever someone wants to reply to that email, or even forward it, the background property will be passed along to the entire message, not just the part you initially sent, giving a dark canvas the person replying or forwarding has to manually change to white.

    Understandably, this can cause frustration for users and can result in fewer replies, forwards, and less engagement with your campaigns. Fortunately, there are tools to help make using background images easier and more reliable.

    Tools for Using Background Images

    Thanks to Stig and Campaign Monitor, a lot of the guesswork of creating reliable background images has been removed with their bulletproof email backgrounds tool. The tool makes building background images effortless, and includes VML code that renders beautifully in Outlook 07/10/13.

    It also takes the 'Black Reply' issue into account and allows you to select 'Full Email Background'. When selected, that option wraps the entire message in a single table cell, which eliminates the 'Black Reply' issue.

    Further Reading

    Bulletproof Background Images Tool
    Add a Background Image to your Email in Two Simple Steps
    Applying Background Images to your Email Newsletters
    Background Images in HTML Email: The Naked Truth
    Background Images and CSS in HTML Email

    Login to leave a comment
    Litmus Logo
      Company
    • Team
    • Customers
    • Careers
    • Contact
    • Brand
      Product
    • Features
    • Pricing
    • Enterprise
    • Extension
      Tools
    • Events
    • Labs
    • Scope
    • Resources
      Help
    • Knowledgebase
    • Status
    • Community
    • Trust
    Subscribe to our emails

    Copyright © Litmus Software, Inc. 2005-2021. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

    Sign in to Community

    Are you new to Litmus Community?

    Create a Free Litmus Account

    Use your existing Litmus login to connect with the world’s most amazing email designers.

    Having trouble signing in? Try Forgot password

    Join the Litmus Community

    Sign up to Community

    Already have a Litmus login? Sign in

    Get more out of your Litmus account

    Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

    • Email Previews

      Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

    • Builder

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Checklist

      Get screenshots in popular email clients to ensure your email looks great everywhere.

    • Code Editor Integrations

      Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

    • ESP Integrations

      Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

    • Spam Testing

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Email Analytics

      Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

    • Private Litmus Teams

      Get full team visibility. Manage Litmus access and monitor usage across private teams.

    No thanks, just sign me up without a trial

    Forgot password

    Enter your email address to reset your password

    Already have a Litmus login? Sign in