Categories:
Windows-10-background-image-support

Background Image now supported in Windows 10 Mail & Live Mail

Category : Email Coding

Before the webmail era took over, the first email client name that came to the mind of the masses was Outlook. What started as Microsoft Internet Mail and News 1.0 in 1997, got rebranded as Outlook Express in Windows 98 to Windows XP, as a part of Microsoft Office bundle (from 2007) and it is now used as Windows Live (webmail) and Windows Mail (Windows 10).

Even though the occasional bugs strike too often and it needs fallback support for most interactive elements, Outlook, in various forms cumulatively, occupies 13% email client market share as per a Litmus Survey.

New Call-to-action

Outlook and its rebellion against Background Images

On June 24th 2016, the Monks had suggested how you can add background images in your emails intended to be opened in Outlook 2007, 2010 or 2013. We had talked about adding a certain VML code into your email HTML to enable support for background images.

It was supported by default in Outlook 2000 to 2003, without the need for VML code, as it used Internet Explorer as a rendering engine. Considered as one of the disappointing moves, Outlook 2007, 2010 and 2013 used Microsoft Word as a rendering engine. This drew loads of backlash from the email development community as Word didn’t support CSS.

Problem Solved For Outlook 2007-2013 but not for Windows 10 Mail

The VML code enabled background support in Outlook 2007-2013 but not for Outlook.com or Windows Live. Moreover, as Windows 10 began shipping commercially, it was observed that Windows Mail, which was email client bundled with the OS, also didn’t support background images.

Outlook-2013-background-image-support

Background rendering well on Outlook 2007 screenshot using conventional VML code

Outlook-2007-background-image-support

Background rendering well on Outlook 2007 screenshot using conventional VML code

Windows-10-mail-background-image-support-not

Same conventional VML background code but background does not load in Windows 10 Mail

Workaround is here: Now All Windows email clients shall support Background images

The following was the VML code used to enable background images in Outlook 2007, 2010 and 2013:

On the top of creating a container using v:rect the most important thing to use is v:image with its source allowing the background image to render in Windows 10 Live Mail. Moreover, by adding properties such as opacity as 0% in v:fill enables the top layer to be transparent to allow new div with content in it and placing inline-block;position: absolute in v:rect the container position is fixed as a background.

The updated code shown below displays background image in Windows 10 mail app as well as on the webmail versions such as Windows Live and Outlook.com.

Outlook-2007-background-image-support

Background rendering well on Outlook 2007 screenshot using updated VML code

Outlook-2013-background-image-support

Background rendering well on Outlook 2013 screenshot using updated VML code

Windows-10-mail-background-image-support

Update VML code with v:image container added, renders the same background well on Windows 10 Mail along with other outlook versions

Limitations

This code shall only be used when the background image width & height is fixed. If you want background with 100% width or dynamic height, then please use our old code; unfortunately, that won’t work in Windows 10 mail.

Closing Thoughts

Outlook is a challenge for email developers around the globe. The sense of achievement in finding a solution to a bug in Outlook is not found in the low lying fruits such as coding of emails for Apple devices (which supports everything out-of-box). Have you come across anything similarly ecstatic? Bless us with your views in the comments below.

The following two tabs change content below.
Kevin George
Kevin is the Head of Marketing at EmailMonks, one of the fastest growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices at EmailMonks Blog.

5 thoughts on “Background Image now supported in Windows 10 Mail & Live Mail”

  • Window mail BG code.
    Working perfect for me

  • Hi @Kevin,

    on Top of BG image again i have Rounded CTA (vml code) Middle of the image.
    How get it

    • Hey Kranthi.
      Please drop in an email to hello(@)emailmonks(.)com about the problem you are facing.
      Monks would be happy to help…

  • I have an email digest I am creating that has avatars with rounded corners. The images that come from the server are square and I thought I could use roundrect with a image fill to display it, but Windows 10 Mail doesn’t seem to support the display of images this way. Do you guys know of any other techniques?

    • Hey Alan…
      Roundrect does not work in some of the browsers. Alternatively, you can use background image having rounded corner and use VML if the number of characters is fixed or it’s one time. Another way is to slice corners as images upside down (so the outer portion of that will be an image giving you inner transparent round corner) and put the background image with square corners behind. This will help you get rounded corners working in all email clients.
      Hope this helps.

Leave a Reply

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