Email clients adding some extra pixels below TD with background image

Question

I am facing a problem making a newsletter in Gmail and Outlook.

I've got a table with some TD's that contain a background-image:

<tr>
    <td width="401" height="99" background="http://www.domain.com/bg_left.jpg"></td>
    <td width="149" height="99" background="http://www.domain.com/bg_right.jpg"></td>
</tr>

I also tried adding the background images trough this method. But with both ways I've got the following behaviour in Gmail and Outlook.

In both examples there is added some extra padding where the image is repeated. Someone familiar with this problem? I couldn't find anything about this by myself.

Thanks instead.

Answer 1

For Gmail, you can remove the margin at the bottom of your images by changing the display property to block will prevent that.

Unfortunately, it seems that Outlook.com doesn't allow you to set the display property of images, but if you add a div (which is a block by default) with the same height as the img, as described here, you'll get the same result.

Answer 2

You'll need to use VML to display background images on a table in Outlook. Here is a tool in Campaign Monitor for doing exactly that.

Firstly, confirm your table cell height="" to the same as your image. Assuming it is, it looks like the cause might be your content expanding the table height past the specified height. Gmail has a habit of stretching the text line-heights, so if you have a   underneath your subheader, this may be the cause. Remove that and it should fix it.

If that doesn't work, post the entire table and I'll take another look.