1

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?

disasterkid
  • 6,948
  • 25
  • 94
  • 179
  • 1
    "The most reliable way of coding background colors is to use the HTML bgcolor attribute with a 6-digit HEX code:" https://litmus.com/blog/background-colors-html-email ~ Give that a go, if that doesn't work, I'd assume foul play somewhere else (like something white on top of your body, or the body tag not rendering styles and it should be a table) Short of litmus, and loading the email in the browser, I'm not sure of how else you'd go about it – MattJHoughton Jan 27 '20 at 10:09
  • The thing is when we send the email from another tool, the background color is applied and visible in Gmail and in that other tool as well, the only mentioning of this color (`#FFEAE7`) is in the body tag. In other words, the attributes of `` are identical between the new and the old place. That has confused us. – disasterkid Jan 27 '20 at 10:23

2 Answers2

4

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!

gwally
  • 3,349
  • 2
  • 14
  • 28
  • I used the following tweak and it seems to work: https://pastebin.com/A1ULNT6B Your code can probably work as well. Unfortunately did not find time to test. But if you agree, feel free to mention this in your answer. Thank you! – disasterkid Jan 28 '20 at 10:14
1

Put this on the Head section

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

Add this to the Body tag

bgcolor="#ffeae7" style="background-color:#ffeae7;"
Rudi
  • 11
  • 1