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, s

Answer 1

CSS background images are not supported in OUTLOOK, you will need to use VML, https://backgrounds.cm/

Sometinhg like this :

<table>
    <tr>
        <td background="https://image.freepik.com/free-vector/abstract-background-with-a-3d-pattern_1319-68.jpg" width="150" height="150">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" 
                style='width:150px;height:150px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
                src="https://image.freepik.com/free-vector/abstract-background-with-a-3d-pattern_1319-68.jpg" />
            <![endif]-->
            <p>Put the rest of your content here</p>
        </td>
    </tr>
</table>

Here are couple of examples :

Examlple 1

Example 2

Answer 2

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>

There are some values that will need changing before your VML will work properly:

• images to change
• fallback color to change
• VML height and width to change

Note: When using VML your content will have to fit within the VML or there will be cases where content overflows but will not show. So keep in mind when this is being built. With this example you can add rounded corners with arcsize in percentages.

Hope this is the answer you were after.