CSS Background Images Now Supported in Outlook.com
Great news! Outlook.com and Office 365 Outlook (also known as OWA) now supports CSS background images. Until now, Microsoft’s webmail properties only supported table background image attributes and not support CSS background images. This restriction forced email designers to use table background attributes in order to display a background image in Outlook.com.
Thankfully this support is enabled in both the “classic” and beta Outlook webmail clients. This change has been propagated to the Outlook iOS and Android apps as well. Much thanks to Jóni de Sousa from Altaire who alerted me to this development.
Benefits of CSS Background Images
A key benefit of CSS background images over table background attributes is the ability to size and position the background image. This allows the designer to size the background to the size of the container or to use a much larger “retina” image as the background to give the email a much more polished look.
Background Image Attribute on a Table
<table width="500"><tr><td background="bgimage.jpg"> ... </td></tr></table>
CSS Background Image
Background Images Still Not Universally Supported
There are still a few clients that don’t support CSS background images (or any background images) so depending on your audience you may wish to keep using background image attributes together with CSS background image for email clients that support it. Either way, make sure you always define a suitable background color as a fallback in case your image is not displayed.
This is where Email on Acid comes in handy. You can quickly see how dozens of clients render your code changes in a single test.
|Outlook 2007-2016 for Windows||Requires VML|
|Gmail App with Non-Google Accounts||No background image support|
|IBM (Lotus) Notes 8.5-9||Only supports background image attributes|
Supported Background Properties in Outlook.com
Outlook.com supports background images in both shorthand and individual properties.
background: url('bgimage.jpg') center / cover no-repeat #888888;
Due to quirks in other clients such as Yahoo! Mail with shorthand background styles, its probably best to use the individual properties when using background images. The following background properties are supported in Outlook.com:
background-image background-repeat background-size background-position background-color background-origin background-attachment
Don’t Guess, Test!
At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.
Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!
Author: Alex Ilhan
Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.