6

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

dakab
  • 5,379
  • 9
  • 43
  • 67
Zeeshan Rang
  • 19,375
  • 28
  • 72
  • 100

5 Answers5

16

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.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
8

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.
Lodder
  • 19,758
  • 10
  • 59
  • 100
2

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.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
1

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

indofraiser
  • 1,014
  • 3
  • 18
  • 50
  • 3
    No, body should always be 100% and you should then define the container width using a `` tag – Lodder May 14 '14 at 09:43
1

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.

PeteAUK
  • 968
  • 6
  • 16