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 , and 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 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 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.

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.

body
{
margin: 0px;
padding: 0px;
}
object
{
margin: 0px;
padding: 0px;
}
table, tr, td
{
padding: 0px;
margin: 0px;
border: 0px;
}
iframe
{
margin: 0px;
padding: 0px;
}
#body.day
{
background: #F0FF00;
}
#body.night
{
background: #000000 url(“images/night_Scene_body.jpg”) repeat;
}

BODY的内容：

<table style=”background-color: Black;” border=”0″ cellpadding=”0″ cellspacing=”0″
width=”100%”>
<tr>
<td>
<object style=”visibility: visible;” id=”bg_left” data=”night_WhoScene_bg_side.swf”
type=”application/x-shockwave-flash” height=”600″ width=”100″>
<param value=”exactfit” name=”scale”/>
<param value=”window” name=”wmode”/>
<param value=”false” name=”allowfullscreen”/>
</object>
</td>
</tr>
</table><div>
<object style=”visibility: visible;” id=”bg_bottom” data=”night_WhoScene_bg_bottom.swf”
type=”application/x-shockwave-flash” height=”40″ width=”1280″>
<param value=”exactfit” name=”scale”/>
<param value=”window” name=”wmode”/>
<param value=”false” name=”allowfullscreen”/>
</object></div>

对于IE7，显示时上面一个swf跟下面一个中间是没有间隙的，而对于ie8,firefox3,chrome1，显示时，两个flash中间都出现的间隙，整了一整天，也不知道为什么，最后发现在将html头部的

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>改成

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

问题竟然解决了，晕哦，但是要真想在 XHTML 1.0 Strict 下正常显示中间无缝隙该怎么做呢？

目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：

1.额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。

我个人不喜欢这种方法，但是它确实是W3C推荐的方法

或者使用

2.使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

3.设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auto就可以在标准兼容浏览器中闭合浮动元素.

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面。

4.浮动外部元素，float-in-float
这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。