CODEWITHSUNDEEP
htmlhtml-email
conbask
conbask

Reputation: 10071

Image Mask in HTML Email

Is there a reliable way to overlay an image over another image in a table-based HTML email? Keep in mind that, in order to render correctly, styles need to be inline.

Upvotes: 3

Views: 2227

Answers (2)

Eoin
Eoin

Reputation: 1515

From what I can gather backround images are not supported through all browsers. However, you may find this page from Campaign Monitor useful. At least it is quick to test the code to see if it suits your readers needs - check your email stats against which clients work before implementing if I were you.

I believe the above advice regarding "the only way to have a bg image that works in all email readers is by specifying one for both the HTML background attribute of the body tag" is also correct although Campaign Monitor seems to indicate otherwise. I would be careful to work out which browsers/email clients use the fallback and as to whether that would negatively effect your design.

As Z Index is supported except in Gmail (so perhaps not all that well), you could try to use that to create a design. Given that Gmail doesn't support it and the fallback is likely to be ugly as sin, you probably don't want to try this.

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

Apparently the only way to have a bg image that works in all email readers is by specifying one for both the HTML background attribute of the body tag (for Outlook 2007, 2010) and the HTML background attribute of an HTML table that occupies the entire page (for all other email readers). It doesn't appear to be possible to have a bg image anywhere else that will display in all email readers.

Generally speaking the answer is "no". You can't overlay foreground content on top of other foreground content, and the options for adding a bg image are almost non-existent. But if you can manage with a single large bg image for the body tag (and table wrapper), combined with one or more foreground images, then "yes".

See: http://blog.mailermailer.com/2011/04/background-images-in-html-email-the-naked-truth/

Edit:

After running some exhaustive tests in Litmus, the answer is a resounding "no". Outlook 2007 and later only supports 2 ways to display a bg image: using the HTML background attribute on the body tag, and using the inline background-image style on the body tag. But in both cases, Outlook scales the image differently than other email readers, and there's no way to prevent the bg image from tiling.

For all practical purposes, in cases where it's important to support a wide variety of email readers:

  1. There's no way to overlay images (or any other type of content).
  2. Bg images are not supported.

Upvotes: 4

Related Questions