{"id":20168,"date":"2020-06-04T18:20:26","date_gmt":"2020-06-04T12:50:26","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=20168"},"modified":"2023-08-22T14:51:44","modified_gmt":"2023-08-22T09:21:44","slug":"how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/","title":{"rendered":"How to Render Background Image Coded in MJML Correctly in Yahoo! Mail"},"content":{"rendered":"\n

Trying background images in email has been a nightmare for email developers since years. However, after 2015, the MSO (Microsoft Office) method helped in troubleshooting several problems in Outlook.\u00a0<\/p>\n\n\n\n

Sadly, that was not the happy ending to all the problems. Even though the obstacles in Outlook almost vanished, other email clients, especially Yahoo! Mail continued to create challenges for email developers<\/a>.<\/p>\n\n\n\n

In this article, we shall talk about one such challenge and its workaround. <\/p>\n\n\n\n

\"\"<\/a><\/div><\/div>\n\n\n\n

The Problem: Background Image not rendering in Yahoo<\/strong><\/h2>\n\n\n\n

While working on MJML email for one of our clients, we faced the challenge of background image not rendering in Yahoo. <\/p>\n\n\n\n

It is a universally known fact that for MJML, we can code background images on two tags, namely <mj-section> or <mj-hero>. We have found that on coding with <mj-section>, the background image renders perfectly.<\/p>\n\n\n\n

On the contrary, using <mj-hero> renders the background color instead of background image in Yahoo! Mail and AOL Mail.<\/p>\n\n\n\n

In the screenshot below, you will be able to see how we have defined background-color. It’s the usual method for defining background color in MJML. <\/p>\n\n\n\n

\"background<\/figure>\n\n\n\n

Why does this happen?<\/strong><\/h2>\n\n\n\n

When we inspected the HTML code to figure out the root cause of this problem, we found that YAHOO-Mail and AOL Mail hide the background image behind background color. For example, if we have defined the background color as black, then it will only display black background color instead of the original background image (as shown in the screenshot below).<\/p>\n\n\n\n

\"YAHOO-Mail\"\/<\/figure>\n\n\n\n

For cross-checking, we tried another possibility and used no background color. By doing so, we got white background color as shown in the screenshot below. <\/p>\n\n\n\n

\"white<\/figure>\n\n\n\n

We tried quite a few tricks to get transparent background color in Yahoo! Mail and AOL Mail, but to no avail. Moreover, it is not possible to define transparent color with Hex code. <\/p>\n\n\n\n

\"\"<\/a><\/div><\/div>\n\n\n\n

And we found the solution!<\/strong><\/h2>\n\n\n\n

As the last resort, we tried to apply background-color=”#transparent”<\/strong> as we have shown in the screenshot below. <\/p>\n\n\n\n

\"apply<\/figure>\n\n\n\n

Voila! It worked for both Yahoo! Mail and AOL Mail. <\/p>\n\n\n\n

That\u2019s how the background image rendered on using this workaround. <\/p>\n\n\n\n

\"background<\/figure>\n\n\n\n

In case, you have faced this challenge in the past, you now have a tried and tested solution from Email Uplers<\/a>. <\/p>\n\n\n\n

Have you faced any other challenges with email rendering? Do let us know in the comments below. We would love to help you by finding a workaround. <\/p>\n","protected":false},"excerpt":{"rendered":"

Trying background images in email has been a nightmare for email developers since years. However, after 2015, the MSO (Microsoft Office) method helped in troubleshooting several problems in Outlook.\u00a0 Sadly, that was not the happy ending to all the problems. Even though the obstacles in Outlook almost vanished, other email clients, especially Yahoo! Mail continued […]<\/p>\n","protected":false},"author":27,"featured_media":20169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382,381],"tags":[],"class_list":["post-20168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding","category-email-design"],"yoast_head":"\nTips to Code Render Background Image In MJML Correctly In Yahoo! Mail<\/title>\n<meta name=\"description\" content=\"In this article, we shall talk about one such challenge you are going to face while coding render background image in MJML Correctly In Yahoo! Mail\" \/>\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\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips to Code Render Background Image In MJML Correctly In Yahoo! Mail\" \/>\n<meta property=\"og:description\" content=\"In this article, we shall talk about one such challenge you are going to face while coding render background image in MJML Correctly In Yahoo! Mail\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/\" \/>\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=\"2020-06-04T12:50:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T09:21:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vivek Makwana\" \/>\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=\"Vivek Makwana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/\",\"name\":\"Tips to Code Render Background Image In MJML Correctly In Yahoo! Mail\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/4e69dcc1be0c731daac2dfdaafdd544b\"},\"description\":\"In this article, we shall talk about one such challenge you are going to face while coding render background image in MJML Correctly In Yahoo! Mail\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML.jpg\",\"width\":1170,\"height\":470},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Render Background Image Coded in MJML Correctly in Yahoo! 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\/4e69dcc1be0c731daac2dfdaafdd544b\",\"name\":\"Vivek Makwana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/vm-96x96.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/vm-96x96.jpg\",\"caption\":\"Vivek Makwana\"},\"description\":\"Vivek is a front-end developer at Email Uplers, one of the fastest-growing email design and coding companies. He is responsible for implementing visual and interactive elements to our awesome emails and is pretty good at finding out-of-the-box solutions to technical challenges.\",\"sameAs\":[\"http:\/\/www.tgh.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips to Code Render Background Image In MJML Correctly In Yahoo! Mail","description":"In this article, we shall talk about one such challenge you are going to face while coding render background image in MJML Correctly In Yahoo! Mail","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\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/","og_locale":"en_US","og_type":"article","og_title":"Tips to Code Render Background Image In MJML Correctly In Yahoo! Mail","og_description":"In this article, we shall talk about one such challenge you are going to face while coding render background image in MJML Correctly In Yahoo! Mail","og_url":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2020-06-04T12:50:26+00:00","article_modified_time":"2023-08-22T09:21:44+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML-540x282.jpg","type":"image\/jpeg"}],"author":"Vivek Makwana","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Vivek Makwana","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/","url":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/","name":"Tips to Code Render Background Image In MJML Correctly In Yahoo! Mail","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/4e69dcc1be0c731daac2dfdaafdd544b"},"description":"In this article, we shall talk about one such challenge you are going to face while coding render background image in MJML Correctly In Yahoo! Mail","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/MJML.jpg","width":1170,"height":470},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/how-to-render-background-image-coded-in-mjml-correctly-in-yahoo-mail\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Render Background Image Coded in MJML Correctly in Yahoo! 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\/4e69dcc1be0c731daac2dfdaafdd544b","name":"Vivek Makwana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/vm-96x96.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/06\/vm-96x96.jpg","caption":"Vivek Makwana"},"description":"Vivek is a front-end developer at Email Uplers, one of the fastest-growing email design and coding companies. He is responsible for implementing visual and interactive elements to our awesome emails and is pretty good at finding out-of-the-box solutions to technical challenges.","sameAs":["http:\/\/www.tgh.com"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/20168","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\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=20168"}],"version-history":[{"count":11,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/20168\/revisions"}],"predecessor-version":[{"id":37047,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/20168\/revisions\/37047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/20169"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=20168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=20168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=20168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}