It’s something that a lot of people struggle with when creating and sending marketing emails that have background images.  Whether applied to a table, div or the background – a majority of Outlook installations will not display it.  A lot of it comes down to CSS coding and whilst most devices like iPhones and iPads (other mobile devices are available) and when viewed through an internet browser or some other email software…

We’ve found the best way to have bulletproof background images is to use Vector Mark-up Language in addition to the usual inline CSS styling you would have.  In the following examples, you will see how we’ve overcome the problem.

Remember, when using the examples to replace ‘my-image-url.jpg’ with the destination URL of the image you actually want…

 

Email background image

This example will fill the background of the email with the image you select.  Add it directly after the opening <body> tag;

<div style="background-color:#909090;">
   <!--[if gte mso 9]>
   <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
   <v:fill type="tile" src="my-image-url.jpg" color="#909090"/>
   </v:background>
   <![endif]-->
   <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr>
       <td valign="top" align="left" background="my-image-url.jpg">

Right before the closing </body> tag, add the following to complete the code;

      </td>
     </tr>
   </table>
</div>

 

Applying images to tables

To apply the image to a single table cell of a specific width and height, insert the following code in place of the <td> tag;

<td background="my-image-url.jpg" bgcolor="#909090" width="640" height="503" valign="top">
   <!--[if gte mso 9]>
   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:503px;">
     <v:fill type="tile" src="my-image-url.jpg" color="#909090" />
     <v:textbox inset="0,0,0,0">
   <![endif]-->
   <div>

Then, add the following in place of the usual </td> tag;

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

If you are looking to apply it to the whole width of the email, for example in a table but tiled for the width of the page, insert this as a direct child of the <body> tag;

<table cellpadding="0" cellspacing="0" border="0" height="503" width="100%">
   <tr>
      <td background="my-image-url.jpg" bgcolor="#909090" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:503px;">
      <v:fill type="tile" src="my-image-url.jpg" color="#909090" />
      <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>

Afterwards, you will need to insert this at the end of the overlaid content;

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

 

To get the image applied to the size of the content regardless of height, remove the height attributes from the inline-style and <td> tags and replace the v:textbox line of code with the following;

<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

 

Still not working correctly?

We know that a lot of the information on this page will only help a more advanced user and someone who is comfortable with HTML coding, so if you’re not comfortable at tackling the problem or not sure – talk to us, we are sure to be able to help.  Either email us or send us a message online using our contact page.