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.
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.
In this article, we shall talk about one such challenge and its workaround.
The Problem: Background Image not rendering in Yahoo
While working on MJML email for one of our clients, we faced the challenge of background image not rendering in Yahoo.
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.
On the contrary, using <mj-hero> renders the background color instead of background image in Yahoo! Mail and AOL Mail.
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.
Why does this happen?
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).
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.
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.
And we found the solution!
As the last resort, we tried to apply background-color=”#transparent” as we have shown in the screenshot below.
Voila! It worked for both Yahoo! Mail and AOL Mail.
That’s how the background image rendered on using this workaround.
In case, you have faced this challenge in the past, you now have a tried and tested solution from Email Uplers.
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.
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.
Deep is a Technical Lead at Email Uplers. With over 5 years of experience in the industry, he has done it all - email development, campaign management, account management as well as strategy planning. He is a pro in MJML, Zurb foundation framework, HubSpot, Salesforce, Shopify, Mailchimp, Campaign Monitor, Dot Digital, Interactive email, Team Building, and Cross-browser Compatibility.
5 Personalization Techniques You Must Use In SFMC
Salesforce Marketing Cloud May 2020 Release: Your guide to all the important features - Part 2