{"id":6909,"date":"2017-02-23T19:31:37","date_gmt":"2017-02-23T14:01:37","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=6909"},"modified":"2022-05-04T18:52:45","modified_gmt":"2022-05-04T13:22:45","slug":"background-image-supports-windows-10-mail-app","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/","title":{"rendered":"Background Image now supported in Windows 10 Mail & Live Mail"},"content":{"rendered":"\n\n\n\n

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).<\/p>\n\n\n\n

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<\/a> market share as per a Litmus Survey.<\/p>\n\n\n\n

Outlook and its rebellion against Background Images<\/h2>\n\n\n\n

On June 24th 2016, Email Uplers had suggested how you can add background images<\/a> 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<\/a> to enable support for background images.<\/p>\n\n\n\n

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\u2019t support CSS.<\/p>\n\n\n\n

Problem Solved For Outlook 2007-2013 but not for Windows 10 Mail<\/h2>\n\n\n\n

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\u2019t support background images.<\/p>\n\n\n\n

\"windows
Background rendering well on Outlook 2007 screenshot using conventional VML code<\/figcaption><\/figure><\/div>\n\n\n\n
\"Outlook-2007-background-image-support\"
Background rendering well on Outlook 2007 screenshot using conventional VML code<\/figcaption><\/figure><\/div>\n\n\n\n
\"Windows-10-mail-background-image-support-not\"
Same conventional VML background code but background does not load in Windows 10 Mail<\/figcaption><\/figure><\/div>\n\n\n\n

Workaround is here: Now All Windows email clients shall support Background images<\/h2>\n\n\n\n

The following was the VML code used to enable background images in Outlook 2007, 2010, and 2013:<\/p>\n\n\n\n

<td background=\"Image Live URL Here\" bgcolor=\"#ffffff\" width=\"650\" height=\"506\" valign=\"top\"  style=\"background-image:url(Image Live URL Here); background-position:center top; background-repeat:no-repeat;\" class=\"em_bg1\">\n  <!--[if gte mso 9]>\n  <v:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:650px;height:506px;\">\n    <v:fill type=\"tile\" src=\"Image Live URL Here\" color=\"#ffffff\" \/>\n    <v:textbox inset=\"0,0,0,0\">\n      <![endif]-->\n      <div>\n        <!-- HTML Content Here -->\n      <\/div>\n      <!--[if gte mso 9]>\n    <\/v:textbox>\n  <\/v:rect>\n  <![endif]-->\n<\/td><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<td valign=\"top\" height=\"700\" background=\"Image Live URL Here\" bgcolor=\"#f7901e\" style=\"height:700px; background-image:url(Image Live URL Here);background-color: #f7901e;\">\n  <!--[if gte mso 9]>\n  <v:image xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\" border: 0;display: inline-block; width: 550px; height: 700px;\" src=\"Image Live URL Here\" \/>\n  <v:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\" border: 0;display: inline-block;position: absolute; width: 550px; height: 700px;\">\n    <v:fill  opacity=\"0%\" color=\"#f7901e\"  \/>\n    <v:textbox inset=\"0,0,0,0\">\n      <![endif]--> \n\t<div>\n\t\t<!-- HTML Content Here -->\n\t<\/div>\n      <!--[if gte mso 9]> \n    <\/v:textbox>\n    <\/v:fill>\n  <\/v:rect>\n  <\/v:image>\n  <![endif]-->\n<\/td><\/pre>\n\n\n\n
\"Outlook-2007-background-image-support\"
Background rendering well on Outlook 2007 screenshot using updated VML code<\/figcaption><\/figure><\/div>\n\n\n\n
\"Outlook-2013-background-image-support\"
Background rendering well on Outlook 2013 screenshot using updated VML code<\/figcaption><\/figure><\/div>\n\n\n\n
\"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<\/figcaption><\/figure><\/div>\n\n\n\n
Limitations<\/h2>\n\n\n\n
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\u2019t work in Windows 10 mail.<\/p>\n\n\n\n
Closing Thoughts<\/h2>\n\n\n\n
Outlook is a challenge for email developers<\/a> 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? Let us know your views in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":9058,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382],"tags":[942,941,940,938,939],"class_list":["post-6909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding","tag-live-background-windows-10","tag-windows-10-live-support","tag-windows-10-mail","tag-windows-10-mail-background","tag-windows-mail-background"],"yoast_head":"\nBackground Image in Windows 10 Mail & Live Mail<\/title>\n<meta name=\"description\" content=\"Different Windows Email clients don't support background images in email. This workaround using VML code can help you overcome that. Read More.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background Image in Windows 10 Mail & Live Mail\" \/>\n<meta property=\"og:description\" content=\"Different Windows Email clients don't support background images in email. This workaround using VML code can help you overcome that. Read More.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-23T14:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-04T13:22:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"198\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/\",\"name\":\"Background Image in Windows 10 Mail & Live Mail\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"Different Windows Email clients don't support background images in email. This workaround using VML code can help you overcome that. Read More.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg\",\"width\":\"1170\",\"height\":\"428\",\"caption\":\"Windows-10-background-image-support\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Background Image now supported in Windows 10 Mail & Live Mail\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background Image in Windows 10 Mail & Live Mail","description":"Different Windows Email clients don't support background images in email. This workaround using VML code can help you overcome that. Read More.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/","og_locale":"en_US","og_type":"article","og_title":"Background Image in Windows 10 Mail & Live Mail","og_description":"Different Windows Email clients don't support background images in email. This workaround using VML code can help you overcome that. Read More.","og_url":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2017-02-23T14:01:37+00:00","article_modified_time":"2022-05-04T13:22:45+00:00","og_image":[{"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg","width":540,"height":198,"type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/","url":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/","name":"Background Image in Windows 10 Mail & Live Mail","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"Different Windows Email clients don't support background images in email. This workaround using VML code can help you overcome that. Read More.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/11\/Windows-10-background-image-support.jpg","width":"1170","height":"428","caption":"Windows-10-background-image-support"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/background-image-supports-windows-10-mail-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Background Image now supported in Windows 10 Mail & Live Mail"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/6909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=6909"}],"version-history":[{"count":22,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/6909\/revisions"}],"predecessor-version":[{"id":31580,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/6909\/revisions\/31580"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/9058"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=6909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=6909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=6909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}