Background Images and CSS in HTML Email
http://www.mailchimp.com/blog/background-images-and-css-in-html-email/
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 ,
<head>
and 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 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.</p>
<p>
Periods = “Stop Email!”<br /> 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.
</p>
<p>
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.
</p>