Background Images and CSS in HTML Email
This page has been moved to our new blog location:
We've noticed a few people having issues with background images in their HTML email designs, so we thought we'd post some quick tips here.
Lots of email applications (especially the browser-based ones, like Yahoo!Mail, Hotmail and Gmail) strip out your <HTML>, <HEAD> and <BODY> tags. It kinda makes sense, if you think about it. They're displaying your email inside their web page. They don't want your page settings (like background colors, files, CSS, etc) to interfere with their overall interface. So they strip it all out.
That means you'll kinda have to rig your HTML email to make certain things work...
Background Images and colors in HTML Email
If you want to set a background image or color in your HTML email, you can set it in your BODY tag, where it usually goes. That'll work ok for some desktop email applications, like Microsoft Outlook.
But to make it work across more email applications, you need to "rig" your code so that your entire email is set inside a big TABLE WRAP. Just set a big table that's 100% wide, then specify your background color and image there. We recommend doing it the old-fashioned "bgcolor" or "background="" way. If you prefer doing it with CSS, be sure to read the "CSS" tips below. As with all images in HTML email, they need to be hosted on your server, and you need to point to them with absolute (not relative) paths.
Once you've created the big TABLE WRAP with your background color or image, place your actual newsletter code inside, and you're good to go.
If you're a very experienced web designer, this will no doubt make you feel dirty, and make you want to take a shower immediately afterwards. But HTML email isn't as reliable as web pages are (yet) and there are way too many email apps out there that display HTML differently. Until all the various email apps get a little more consistent, you're going to have to get used to "rigs" like this.
CSS in HTML Email
There are all sorts of "CSS tips and tricks for HTML email." But the main thing to remember is that the <HEAD> and <BODY> tags get stripped when HTML email is displayed in browser based applications. So that means you can't link to an external CSS file from the <HEAD> portion of your email. You'll need to use embedded or inline CSS in HTML email instead. And, if you take the embedded approach, be sure to place all your code BELOW the <BODY> tag. Place it just above your content. Feels dirty, I know. But it's the only way to get CSS to work (reliably) in email.
Periods = "Stop Email!"
If you start any line in your email with a "period," some email servers interpret that as "end of message" and they'll stop it right there. D'oh! So this affects how you need to code your CSS. When you embed your CSS, be careful with the little "dots" or "periods" that are used to define styles. If you start your line of CSS with ".header" for instance, that's exactly where some email servers will cut your message off. So in your CSS, add a space before every single line that starts with a period.
It's not just a CSS thing. It's any line that starts with a period (see our previous post). But the CSS portion of your email is more likely to have lines that start with periods, so it's good to mention it here.
Want some more tips on HTML email coding and design? Try our free PDF.
TrackBack URL for this entry:
Listed below are links to weblogs that reference Background Images and CSS in HTML Email:
Good reference post. One of my clients was working with css and had external and internal css, but Gmail was parsing it terribly. I did some research and found this: http://www.xavierfrenette.com/articles/css-support-in-webmail/. I took my client's newsletter (filled with span classes and other) and did all of the css inline (had to add a few p tags here and there). It worked perfectly in Gmail and Hotmail thus far.
So an example of inline css can be found here:
you can do this on lots of (I believe actually all) html elements.
Let me know if you have any questions.
Posted by: michael shearer | Jan 24, 2007 10:19:23 PM
love this site. I was wondering how to add a background image when testing emails in outlook. I usually set up a large table with a bg image then put my content within a table inside that. Only thing is we develop to about 600-650 px width. So I can't have a large bg image 100% of the window. when I test on a pc and copy from mozilla the bg images don't get copied-so it's hard to tell if something quirky happens. funny though i just learned the value of CSS but started doing more emails lately at work and now that i have a taste for the div....man i don't want to go back to tables! any suggestions would be greatly appreiciated!
Posted by: lance | May 8, 2007 2:00:57 AM
Sorry, but this is a pretty old post here.
Background images really aren't safe to use in HTML emails.
Outlook used to be one of the few email programs that would actually render them, but with Outlook 2007 using Word to render emails, that's going away soon.
You can still try pulling in background images (are you using absolute paths in your code, and uploading the background image to your server?), but be sure you design it to fail gracefully. Give your table a background color that matches the background image as close as possible. Expect the majority of email programs out there to not render your bg image.
In terms of CSS support in HTML email, the only "safe" way to use it these days is inline CSS.
Posted by: Ben | May 8, 2007 7:53:20 AM
Ive been looking for the answer to this for a while now, thanks.
Posted by: Oliver Smith | Jul 24, 2007 7:11:31 AM
The comments to this entry are closed.