css - How to use image as a table background in email?

Question

Stack Overflow users.

We run a newsletter. We need to display an image with text as a header.

We've got a massive personalization for a big user database, so we need a dynamic text overlaying a text image.

What are the options currently supported by most clients?

The obvious plan is to use table's background-image. Supposedly it's not working in Outlook?

There is a fallback plan that's bulletproof in terms of client support: generate an image server-side an include as graphic file. What would be the easiest way to implement it in case nothing else works?

What way would you go? Thanks!

Answer 1

Background in Outlook works with VML only. To add an image to a table cell for personlisation i would suggest using the below code:

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td background="[IMAGE GOES HERE]" style="background:url('[IMAGE GOES HERE]'); background-image: url('[IMAGE GOES HERE]');">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[ADD WIDTH OF IMAGE];height:[ADD IMAGE HEIGHT];">
<v:fill type="frame" src="[IMAGE GOES HERE]" color="[FALLBACK COLOR]" />
<v:textbox inset="0,0,0,0">
  <![endif]--> 

[HTML CONTENT HERE]

<!--[if gte mso 9]>
</v:textbox>
  </v:rect>
  <![endif]-->
  
  
  </td>
    </tr>
  </tbody>
</table>