back arrow
All Blogs

How to Render Background Image Coded in MJML Correctly in Yahoo! Mail

Trying background images in email has been a nightmare for email developers since years. However, after 2015, the MSO (Microsoft Office) method helped...

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. 

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).

YAHOO-Mail

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. 

white background color

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. 

apply background-color

Voila! It worked for both Yahoo! Mail and AOL Mail. 

That’s how the background image rendered on using this workaround. 

background image rendered

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. 

Did you like this post? Do share it!

    Get In Touch

    We shall get back to you within a few hours.

    Vivek Makwana

    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 Thaker

    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.

    Leave a Reply

    YOU MAY ALSO LIKE

    WE CAN ALSO HELP YOU WITH

    Email Template
    Productions

    Transform your requirement into visually-appealing & high-converting email templates.

    EMAIL OPERATION
    SUPPORT

    Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.

    DEDICATED
    RESOURCE TEAM

    Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.

    Digital
    ASSETS

    Get more from your paid marketing campaigns through conversion-driven landing pages and banners.