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.
Table of content
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-image:url('bgimage.jpg')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.| Email client | |
|---|---|
| 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;
background-image
background-repeat
background-size
background-position
background-color
background-origin
background-attachmentDon’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!
