Outlook email html background color

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:

      Insert your body copy and nested tables here. 
www.emailonacid.com 
 
Content
 
 
    

Let’s Break this Down…

1.) DOCTYPE

2.) Embedded Body Properties

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

The .ExternalClass is used for Hotmail and ensures your email will take up the entire width of its viewing pane.

The .yshortcuts 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 . 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

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

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 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

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 “ 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

Author: Kyle Lapaglia

Author: Kyle Lapaglia

18 thoughts on “Background Colors in HTML Emails”

Great article Michelle. Most of my emails don’t get too long so I find that the wrapper table works pretty well. This solution is much cleaner however.

Thanks a ton. Who had the “wise” idea at Microsoft to screw up people’s HTML signature anyway?? This code got me almost where I need to be:

I still have to hit backspace each time to remove the break it inserts…ARGG. …but I can live with it now.

If you insert your body copy and images inside the , images will resize.
If you insert your body copy and images by using a table inside the , images will not resize.

Kathy, Which email client resizes images if they are not within a table? In my experience, Outlook 07 does not support the width/height attributes within images – instead it reads the actual dimensions of image itself, no matter what the container is. But I’d be happy to test your theory.

Serif, I just tested it once again in Gmail and everything looks a ok, can you let me know which browser/OS you are using so I can try to re-create the issue on my end?

@paul, You are right, though it is not technically correct to put block elements within inline elements, our goal was to overcome the Outlook spacing issues. You can use a DIV instead of a SPAN and fall back on the SPAN option in the event that you run into large horizontal gaps in Outlook. Here’s more on that: Spacing Issues in Outlook 2007 and 2010

I am having an issue where the background color of the email is picking up in the reply. The color is black and when a client hits reply, the email is going black (on some clients, I can’t replicate it with any of my devices). Any idea why this is happening? I don’t want to not use black…

Very good article on this problem – however no matter what fixes you apply once you mix images tables with text tables – whether nested or stacked, large or small Outlook will add a left margin to the text table. I have used your CSS code above and tried all the known fixes from margin-left, to border-left, and display:block; (which is essential for every image to align properly in hotmail), and yes you can fix it in Outlook but it will be off everywhere else. It seems to me that a logical fix would be like the old IE hacks where you could add an “if” “else” section that applies to the Microsoft – something along the lines of
IF [if gte mso 10] – is this possible? I don’t speak any Micrsoft code.

Regarding putting in margin or padding inline for paragraphs: does Lotus Notes finally behave? I haven’t had a chance to test on Notes in a while, but I found forsaking p tags and doing something like this gave me the best results: blah, blah, blah

blah, blah, blah It is a sin, semantically, but Lotus Notes, at least as far as html email display goes, is way worse than a sin, just flat out evil. If you listen closely when Lotus Notes opens an html email, you can hear the bwaa-haa-haaa sound it makes. I like to imagine what goes on whenever they approve the latest version, “Well, it still breaks html emails 25 different ways – good enough, let’s ship it! Heck, we’re just a big company with major corporate clients, why bother getting html display right?” It’s going to become a tag line they’re proud of, “Lotus Notes, torturing, bewildering and vexing html email creators for 20 years!”

Fantastic work! Solved almost all of my issues. Now I don’t suppose you know how to make Outlook obey either 100% height tables or repeat-y background images? I’ve taken to using 10 x 100% height, 1px width table cells that each have a progressively lighter grey in order to fill in the vertical portion of a drop shadow. Works everywhere but Outlook 2010 (PC). Even works fine on Outlook 2011:Mac. Cheers,
Pt.

Greetings, I am using Outlook 2010 and trying to create signatures for my emails. While I have been able to create very basic versions it seems that the signatures contain unwanted line breaks following the last item. A review of the line breaks also shows that they are in a different font than set-up in the signature. My ultimate goal is to create an email template which will use the signature. Any help is greatly appreciated! Thanks, Kevin

Thanks! it works but you have to insert the

I tried this approach, but it breaks in AOL. I have

……..
……..

… However, AOL removes everything after the first tag. Know why it might be doing this to me?

Источник

HTML Background Images in Email: A Cheat Sheet

Background color and images can really add to the look and feel of an email. Here, we’ll run through everything you need to get HTML background images to work in all the clients that support them, as well as the different ways to include color in your HTML email.

Here’s a comprehensive list of email clients that support background images.

If you’d like to jump ahead, don’t let us stop you:

Email Client Background Image Support

Adding background images can cause some headaches. All desktop versions of Outlook need vector markup language (VML) to display the image correctly, as they use the Microsoft Word rendering engine.

Windows 10 also has similar quirks, but needs even more information than earlier Outlook versions, mainly the width and height being in point (pt) format instead of pixels.

Tip: to calculate image size using points (pt) multiply the pixel value by 0.75. (e.g. 640 pixels x 0.75 = 480pt.)

WebKit emails and the vast majority of modern email clients can use the normal CSS or HTML background attribute.

Justin Khoo over at FreshInbox discovered another email client that, until late last year, we didn’t know supported background images. Gmail app for non-Gmail accounts (GANGA) are the email clients you see listed when you go to set up your email on mobile.

These accounts now support background images on both iOS and Android, thanks to a simple fix using the CSS background property, with the properties values set in shorthand.

What’s the difference between HTML and CSS? HTML is the code that creates and adds function to an email; CSS is the code that makes it aesthetically pleasing.

The code below covers every instance where background images are now supported. We’re going to go through the below block piece by piece, but you can copy/paste this code into your HTML and simply change the content:

Let’s Break It Down

HTML becomes much more approachable when you know what everything means.

Источник