How to overlay text on an image (HTML email)

Wondering if someone can help?

I’m trying to overlay text on an image (attached). The text is the [[price]] but am not able to do this without using position relative etc. But most email clients don’t support that. Is there anything else I can do? I’ve tried adding a new tr/td for the text overlay but this has not worked.

Here is a code snippet:

<td bgcolor="#ffffff">
       <img src="assets/hero@2x.png" width="100%"  />  
       <span style="position:relative;top: -95px;left: 480px;color: #ffffff;">[[price]]</span>



I would use a background image for the table and then use real text for the 'Stay worry free price per month" which you will be able to put in the corner if you use the right cell structure.

In that way the text is still there if email clients don’t render the background image.

Have a look here for the best way to add a background image.

You never want to move text on to an html image as positioning is a complete no no for email.

1 Like

Ok. Thanks PaulOB. I’ll try your suggested method.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.