Blog   /   Background Colors in HTML Emails

Background Colors in HTML Emails

In my last article I explained why the large, horizontal gap sometimes appears in Outlook 2007 and 2010. Unfortunately the only perfect fix is to stack your tables so that you never have a table that exceeds 23 inches in height. One common strategy for setting a background color for all email clients is to create wrapper table with a width of 100%. This makes it challenging to keep your tables under 23 inches in height - especially when developing long newsletters. With that said, here's another option you might consider...

Here it is, short and sweet:

<html>
<head>
    <style type="text/CSS">
        body, #body_style {
            background:#000; 
            min-height:1000px; 
            color:#fff; 
            font-family:Arial, Helvetica, sans-serif; 
            font-size:12px;} 
         
        .ExternalClass {width:100%;}
        .yshortcuts {color: #F00;}
        p {margin:0; padding:0; margin-bottom:0;} /*optional*/
        a, a:link, a:visited {color:#2A5DB0;} /*optional*/
    </style>
</head>

<body style="background:#000; min-height:1000px; color:#fff;font-family:Arial, Helvetica, sans-serif; 
   font-size:12px" alink="#FF0000" link="#FF0000" bgcolor="#000000" text="#FFFFFF"> 

	<span id="body_style" style="padding:15px; display:block"> 
    
		Insert your body copy and nested tables here. <br />
        <a href="https://www.emailonacid.com" style="color:#F00">www.emailonacid.com</a> 
        
            <table bgcolor="#000000" width="600">
              <tr>
                <td>Content</td>
              </tr>
            </table>
          
    </span>

</body>
</html>

Let's Break this Down...

1.) DOCTYPE

I recommend testing in all browsers without a DOCTYPE because most email clients will strip it out.

2.) Embedded Body Properties

<style type="text/CSS">
	body, #body_style {
        background:#000; 
        min-height:1000px; 
        color:#fff; 
        font-family:Arial, Helvetica, sans-serif; 
        font-size:12px;}  
</style>
The "body" is defined here for Yahoo Beta because it does not support your body tag. Instead, it will create a wrapper div around your email and that div will inherit your embedded body styles. The "#body_style" is defined for AOL because it does not support your embedded body definition nor your body tag, we will use that later as our wrapper. The "min-height" attribute in this case is used for AOL so that your background doesn't get cut off if your email is short. Random fact: If you include any single quotes in your CSS comments your entire email will appear blank in Entourage 08. This tidbit had me stumped for quite a while.

3.) Recommended Default Styles

<style type="text/CSS">
	.ExternalClass {width:100%;} 
	.yshortcuts {color: #F00;}
	p {margin:0; padding:0; margin-bottom:0;} /*optional*/
	a, a:link, a:visited {color:#2A5DB0;} /*optional*/
</style>
The .ExternalClass is used for Hotmail and ensures your email will take up the entire width of its viewing pane. The .yshortcuts {color: #F00;} is for Yahoo Classic and Yahoo New. Set this to be the color you prefer for your links. By default, I reset the padding and margin for my email to "0". This forces me to do all of my spacing inline. This also overwrites Hotmail's default CSS: p {margin:0 0 1.35em}. Since Gmail doesn't support embedded CSS and it uses default browser margins for paragraphs, I always include a "margin=0" inline as well. From there I do all of my paragraph spacing with padding for a few reasons:
  1. Hotmail does not support the "margin" nor the "margin-top" properties and
  2. Outlook 2007 and 2010 offer better support for padding in block elements
Gmail uses #2A5DB0 as its default color for anchors. This is another style I don't allow myself to change because it forces me to overwrite my link colors inline.

4.) The Body Tag

<body 
style="background:#000; min-height:1000px; color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px" 
alink="#FF0000" 
link="#FF0000" 
bgcolor="#000000" 
text="#FFFFFF">
I included the style attribute for Gmail, it does not support embedded CSS and will convert this body tag to a div and maintain its inline styles. Since it gets converted to a div, the other body attributes like bgcolor are ignored. I included body attributes (alink, link, bgcolor and text) for Lotus Notes 6.5 and 7, as these clients do not offer much support for embedded nor inline CSS. The "min-height" attribute is set for Gmail and AOL since they will be converting your body to a div.

5.) The Span Wrapper

<span id="body_style" style="padding:15px; display:block">
This span is working as a wrapper and is required for AOL. You can use any inline html element but it must be a standard element. For example, a custom tag like <aol_body></aol_body> will not work. Since Outlook 2007 and 2010 ignore the display:block in this span, it will not create unwanted horizontal gaps (as long as you do not have a table in your email that exceeds 23 inches in height).

6.) The Table

<table bgcolor="#000000" width="600">
  <tr>
    <td>Content</td>
  </tr>
</table>
Here's where you would stack your tables, I threw in a bgcolor and width attribute for the Android Gmail application. As I have mentioned many times prior, Gmail converts your body to a div, even on mobile apps. Since there is no width set in your body, the Android sets the width of your converted body tag to that of the device viewport. To make a long story short, your background color will get cut off unless you add it to each of your tables as well. Random fact: At least one "<table" or "<img" text string must be in your HTML code in order for Entourage 04 and 08 to process your embedded and inline CSS. This is especially important if you rely on divs only.

I tested this in the following email clients:

  • Android Gmail
  • Android Mail
  • AOL
  • Entourage 04
  • Entourage 08
  • Gmail
  • Hotmail
  • iPad
  • iPad Gmail
  • iPhone
  • iPhone Gmail
  • Live Mail
  • Lotus Notes 6.5
  • Lotus Notes 7
  • Lotus Notes 8
  • Lotus Notes 8.5
  • Mac Mail
  • Outlook 2003
  • Outlook 2007
  • Outlook 2010
  • Outlook Express
  • Thunderbird2
  • Thunderbird3
  • Windows Mail
  • Yahoo Beta
  • Yahoo Classic
  • Yahoo New

Latest Articles

Email envelope on a Black Friday shopping bag
Black Friday Email Strategy for 2024: New Consumer Insights
red green eyeglasses on snowflake background
How People with Color Blindness See Your Holiday Email Campaigns
Accessibility icon emerges from an email envelope
Email Accessibility in 2024: A Complete Guide for More Inclusive and Effective Campaigns