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.