Outlook Web App Does NOT Support Background Images


There’s a Storm Brewing for Email Designers

During our first impressions of the Office Web App (OWA), we noted that there didn’t seem to be any support for background images. But knowing Microsoft we had hoped to find some kind of work-around. We tried several sneaky tricks of the trade in an attempt to get something through their parser but what we found was even worse than we had first suspected: OWA seems to strip out all styles, inline and embedded, other than a select few which can be translated into <font> tags. That’s right, no padding, margins, alignment, pseudoclasses, and so on.

At the moment this might not seem like a big deal. Who even uses OWA anyway? But according to Microsoft, this is the future of their Office suite. You might want to start thinking of OWA as Outlook 14. And Outlook 15, 16, 17…

Office 365 screen

Here’s a list of what we tried…

  • BODY and TD with Background Attribute
  • BODY, TD, DIV, and P with Background Property
  • BODY, TD, DIV, and P Background-Image Property
  • Embedded Element Selectors
  • Embedded Class Selectors
  • Embedded Descendant Selectors
  • Embedded Attribute Selectors
  • Style block before closing body tag
  • Style block nested in conditional statements
  • Style block with non-standard attributes

Here’s our basic background images test.

Better Batten Down the Hatches…

We’ve grumbled and moaned about designing for the Outlook series and its finicky Word rendering engine, but those problems were nothing compared to OWA’s blatant disregard for standards. In fact, it’s more than disregard, as they go out of their way to strip almost all styles from the email before rendering it. But this is just the beginning. As more and more people migrate to the new subscription based Office 365, OWA will be impossible to ignore. We’re hoping that we can find some tricks to get basic CSS working, or perhaps convince Microsoft to support basic CSS in the future.

Scallywags Wanted

If you’ve found a way to make background images appear in OWA, we’d love to hear about it! There’s even some EOA swag in it for you if you figure it out before we do.

Want to start a crusade like www.fixOutlook.org? Reach out to us and let us know your thoughts in the comments section below… that’s a cause we’d fly our flag for.

email on acid crusade

14 thoughts on “Outlook Web App Does NOT Support Background Images”

  1. The URL for the ZIP file is 404ing.

    Also, do you have an environment to test it in for us?

    Would love to get into the code!

  2. Microsoft didn’t listen when we did FixOutlook.org so why would they listen now?

    Who ever is in charge over there should be fired imho.

  3. @Alex,
    Sorry about that, the download link should be working now. We hope to add OWA to our testing suite soon, but we don’t have it yet.

  4. Have you tried using the regular Outlook “hack” to enable background images using vml tags? I realized that this might only work on the desktop version only but it might be worth giving it a shot.

    http://emailbg.net/

  5. @Rob,
    Yes, we did try VML. OWA doesn’t use the Word rendering engine, so it didn’t work. Thanks for the suggestion though!

  6. They seem to have disabled it for the browser version of Outlook now as well. Why does microsoft continue to destroy their email clients? Don’t they know emails are more than just text these days?

  7. This little mistake or is it deliberately removed that facility to display the background in the new outlook Web app. Any way it is not much cooler with the Web app. Thank you for sharing about the minor but important details of office 365

  8. I “sort of” figured something out!

    Using this fix for Outlook: https://www.campaignmonitor.com/forums/topic/3862/view/#p14184

    I included a

    tag kind of like this:

     

    ..right after the opening v:shape conditional comment and before the nested table. The background repeats, and I still have some aligning issues I need to work out, and it doesn’t work in the preview pane in the full version of OWA, but it works.

  9. Hi Geoff,
    Thanks for the post!
    Do you know how can i use a conditional comment for outlook 365?
    At the moment i cannot find a solution to create a table with background image,

    Thanks in advance!

  10. Ariel,
    As far as i know, there is no conditional code for Office 365. Have you tried placing the background image on a TD?

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies