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-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 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; 

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!

<a class="btn" href="https://www.emailonacid.com/signup" mce_href="https://www.emailonacid.com/signup
” title=”Email Testing” target=”new”>TEST TODAY!

Original Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here