Email Development
CSS Background Images Now Supported in Outlook.com
Email Development
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.
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.
<table width="500"><tr><td background="bgimage.jpg">
...
</td></tr></table>
background-image:url('bgimage.jpg')
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 |
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
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!
