Background color not applied on Gmail, lack of "Open In Browser" link makes troubleshooting difficult

6.8k Views Asked by At

I am testing an email from a marketing tool that does not yet support the "Open in Browser" link. We noticed that the background color of the email is not applied to Gmail's Web client (and we have a white background instead). But troubleshooting becomes hard once we don't know how Gmail is interpreting the code.

This is the <body> tag of our email and the only place where this background color is mentioned:

<body width="100%" style="margin: 0; mso-line-height-rule: exactly; background-color: #FFEAE7;">

We have access to a Litmus account where we have tested the email. When we open up the Gmail Web client view and click on the Edit Code button, the original rendering of the code is displayed and therefore the pink background comes back, so again we are unable to see why the bg color is ignored.

Is there a way around looking deeper into why this background color is not applied on Gmail?

2

There are 2 best solutions below

1
gwally On

Gmail will override the color on the <body> tag and use default white or the color set in the user preferences. For instance, if the user has chosen Dark Mode, it will override any <body> setting and change the color to #333333.

If you are centering the body of your email as many do, apply a body color for Gmail by using the <center> tag instead:

<body bgcolor="#FFEAE7;">
<center style="width: 100%; background-color: #FFEAE7;">
*content*
</center>
</body>

The caveat is that if a user has set Dark Mode to view the email, the value will be overwritten and converted to a dark color. As of today when I am writing this, there is no way around this behavior.

Good luck!

0
Rudi On

Put this on the Head section

<style>
body {
background-color: #ffeae7;
}
</style>

Add this to the Body tag

bgcolor="#ffeae7" style="background-color:#ffeae7;"