Body background color not working for email newsletter

html css newsletter

29,654

Solution 1

The body element is ignored by most mail clients. If you need a background, you'll have to make a container element and add the background to that.

Solution 2

Try using this:

<body bgcolor="#efefef" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
              <td width="650" valign="top" align="center" bgcolor="#efefef">
                  ....
              </td>
        </tr>
    </table>
</body>

The tag is now your container wrapper for the email template. As some email clients strip the body tag, you then have a 100% table to fall back to which all clients support.

I would also suggest using the following in your <head> tag:

<style type="text/css">
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
    .ExternalClass {width:100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>

This does the following just as a few extras:

Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
Force Hotmail to display emails at full width.
Force Hotmail to display normal line spacing.

Solution 3

Body width should ideally be 640 as most mobiles and tablets will resize the email correctly then.

Solution 4

Every e-mail client handles things differently, so some strip the body out, others don't.

I'd do a few changes on your code. Firstly, use instead of . Although div does work on most clients, you'll have better flexibility with tables as they will resize based on the size being viewed. Wrap everything in a single cell table and apply the background colour to that element.

Finally you need to do some testing on mobile phones as they only have a width of 460px on average your max-width should be 760px, not 860px. Your mail currently wouldn't display on a portrait iPad for example.

http://putsmail.com/ Is really useful for testing.

Solution 5

Body element is not always ignored (particularly in Outlook), however you should also pair it with a full width table as a fallback. This also makes a good method to have the forwarding background color remain white, while your html area background remains something else.

Here is a basic setup with this in mind:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFFFFF" style="padding:30px;">
      Content here
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

On a side note, if you want a backgorund image, there are 2 methods in html email. See this answer for more details.

View more solutions

29,654

Author by

Zeeshan Rang

Updated on July 05, 2022

Comments

Zeeshan Rang almost 2 years

I am working on an email newsletter. Everything else is in place and working fine, except for the body background color, or it’s the body width at 100% that is not working.

Any idea what I have done wrong here, or how can I make it work?

URL of my newsletter: https://dl.dropboxusercontent.com/u/29654441/Accessibility/New%20folder/newsletter_issue1/newsletter_inline.html