Background Image Support in Email Clients
Adding background images is arguably the easiest way to make emails both stunning and more functional. But do all email clients support this feature?
Background Image Support
The main issue with adding background images in emails is that they aren’t supported across all email clients for security or other reasons.
Webmail: No Fuss
Making background images display on webmail clients is the least troublesome endeavor: all major platforms support this functionality. The only exception is Yahoo! Mail which removes slash syntax values and makes the value invalid.
Mixed Mobile Bag
Roughly half of the popular email apps can display background images, and the rest of them provide at least partial support. The most common issue is lack of support for background-attachment: fixed CSS property.
Desktop Spells Trouble
Desktop-based email clients struggle with background images the most. Currently, only Apple Mail 10, Outlook for Mac and Thunderbird are fully compatible, whereas the rest of desktop clients provide partial or no support.
See the table below for a more detailed overview of background support across different email clients.
Background Image Benefits
A major advantage of background images is that you can place additional HTML content on top of them. This is because, unlike regular images, background images can have additional layers of information. For example, you can have additional images, text, or calls-to-action existing within the same space.
Take a look at the Salesforce promotional email to see layering in action:
Another benefit of using background images instead of putting text in the image itself is that any of the HTML content put on top of the image remains readable even if the images are disabled by the email client. In other words, background images is a great way to make your emails more accessible.
Coding Background Images in Email
There are two main methods to insert a background image into email content:
- Setting HTML attributes to a table or a table cell (table and td elements, respectively)
- Adding CSS styling to table or cell element
Using HTML Table Attributes
Utilizing the background attribute on a table or table cell is the oldest way to implement background image functionality. Although this method is now considered old-school and deprecated, it still works because of HTML’s backward compatibility. Basically, you are specifying the email client to render a background image that is stored in the specified URL. Here’s a code example:
One of the most useful background attributes is background-size that allows you to state how the image should be sized in relation to the available space. This is very useful on mobile devices with limited amount of space. Instead of letting the device to shrink down the image (it is often a default behavior) you could use values like cover or contain to display the image more gracefully.
Adding CSS Properties
A more up-to-date and flexible method is using the CSS background-image property inline on a div or td container. The background-image property again uses a URL as a background image source.
It is important to know regardless of the method chosen (HTML attributes or CSS properties), you will not be able to edit the dimensions or change the position of the background image. Additionally, if the dimension of the
container is greater than the image itself, then the image would be repeated. However, you can avoid these situations by:
- preventing background image from repeating (background-repeat:no-repeat property),
- specifying background position (background-position property)
Coding email content in HTML is, of course, not everyone’s cup of tea. That’s why we have included background image configuration right within JungleMail interface. Simply select a content section, enable Section background image on the right, select an image, check some boxes for better layout, and you’re good to go.
Takeaways
- In email coding, it is generally advised to use properties that have been around for a long time. The older the HTML or CSS rule is, the more likely it is to work. With this guideline in mind, it is no surprise that the background attribute on a table has the greatest support across email clients.
- To be on the safer side, it’s always good to have an ALT text for your images. Include the width and size of your image, too: this will give your ALT text a display container when images are disabled. If you do not specify the dimensions, some email clients collapse that area together with your ALT text.
- It is also recommended to specify a fallback color by using a bgcolor attribute. This will ensure that, even if the background image doesn’t show, the content of your email is readable against the fallback color.
