Background Color For Entire Email

Hello, I know that some clients strip the body tag from emails, so I cannot rely on assigning a background color to the body tag. I wrap the entire email in a table with 100% width and give that a background color, but it only extends vertically for the height of the content of the email. My question is how do I get a background color that extends the full width and height of the "page" that will work in most email clients?

NickoLabs NickoLabs, 6 years ago

I'm wondering... Which clients are stripping <body> tags? (apart from Notes 6 and 7)

Another question: are you using the background color on the body tag as part of your design?
In that case, you might wanna keep the CSS declaration, and still add a 100% width table.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TITLE</title>
<style type="text/css" media="screen">
body {
    background-color: #f0f0f0; /* Light gray */
}
.content {
    background-color: #f0f0f0; /* same as body */
}</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
        <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr><td class="content">CONTENT</td>
        </tr></table>
     </td>
  </tr>
</table>
</body>
</html>

I know, I'm not declaring any Doctype... Does it changes something for email clients?

That's pretty much all I know about that... haven't done lotta testing yet.
You might wanna take a look into this: http://www.campaignmonitor.com/css/


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
bopjo1 bopjo1, 6 years ago

Thanks for your reply. It has been my understanding that Gmail doesn't support styling the body tag. Am I wrong?

fyredefyre fyredefyre, 6 years ago

If you want your background color to extend the height of your email then my recommendation is adding another table/cell with the background color set at the top and bottom of your email to accommodate this space. I'd normally do this on the left and right hand side of your email for complete consistency, but that's up to you.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
zapatoche, 6 years ago

yop, I always add a table cell wrapper at 100% width to apply background color to the email.
Don't forget to reset your background color in any nested table. quite a few email client don't understand inheritance and you end up with big ugly unwanted squares.

NickoLabs NickoLabs, 6 years ago
zapatoche :

Don't forget to reset your background color in any nested table. quite a few email client don't understand inheritance and you end up with big ugly unwanted squares.

You are SO right!

I haven't included the whole template, but that's pretty much what we all do: huge table with nested tables for content... and "reseting" background colors. And with that in mind, I might go and verify my older templates nested-table-background... Perhaps I forgot to reset some of them! *ooopsie* :D


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098