How to Put Text Over an Image (in email)?

Question

Since this is impossible: ::after for inline HTML email?

How can I put text over the below image?

Keep in mind that position and negative margins don't seem to be supported by email.

<img src="http://www.livetochallenge.com/assets/blue-banner.png">
<div style="display: inline-block;"> # Put this text on banner
  Put<br>
  Over<br>
  Image
</div>

Answer 1

When it comes to text-over-image in email, your safest possible route is rendering the text onto the image and providing ALT tags. This gives you 100% assurance that all text will always be on the image, regardless of device or email client. Many clients out there don't support background images, so while you may get it to render properly on one, there's always that user who still uses Outlook from 2009.

Some of my colleagues have used this site with pretty good results: https://backgrounds.cm/ - but again, it won't work on all clients / devices.

Another solution would be to "fudge" the background. For instance, if the text is going to be over a solid color graphic, you can slice that out independently and use a background color. That way the text is still live. For instance - the image you provided appears to be a banner. Maybe the middle part is simply just a TD with a background color of #2E3E65, and the surrounding elements have the banner image that you provided.

With the above said, though, my strong suggestion is to go the image route. Then focus can be put on responsive testing, versus editing. Hope I helped.

EDIT Have a look at this: https://www.campaignmonitor.com/css/ If going the code-route is an absolute must, it's a very handy guide that illustrates what elements / tags / properties work on all major email clients. It can also be beneficial information to pass onto a client if they insist on live-text :-)

EDIT 2

I just did everything inline here. The markup can be heavily cleaned up if you want to toss in a style tag, then just add the styles within there (instead of in the html).

<table style="width:300px; border-collapse: collapse; margin: 0; padding: 0; border: none;">
<tr style="height: 54px;">
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://www.livetochallenge.com/assets/blue-banner.png" style="margin: 0; padding: 0;"/></td>
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none;"><div style="background-color: #354871; height: 37px; color: white; text-align: center; padding-top: 15px;"># Put this text on banner</div></td>
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://i.imgur.com/OgwtHvr.png" style="margin: 0; padding: 0;"/></td>
</tr>
</table>

This will produce the "fudge" effect as seen below: .

Notes - I just used photoshop to horizontally flip the image. Also, disregard that slight color change. It's just a matter of how I exported the flipped image.