If you create a HTML email with an background image, you might be using something like this:


<td align="center" bgcolor="#F4C046" 
 style="background-image: url('../image.jpg');
        background-repeat: no-repeat;
        background-size: cover; 
        background-position:center;
        background-color:#F4C046">
  <div>
  </div>
</td>

While this is will work great in most Email-Clients, it won’t work in Outlook 2007-2016. For that you need to use Vektor Markup Language (VML), which is a feature of Microsoft which is deprecated since 2011, but its the only way that one can make background-images accessable for Outlook 2007-2016. Using VML is often refered to as “BULLETPROOF-BACKGROUNDS”, because if you use inline CSS combined with VML, then the background should work in every client.

This is how to use it (make sure to change the src path to the location of your image):


<td align="center" bgcolor="#F4C046" 
 style="background-image: url('../image.jpg');
        background-repeat: no-repeat;
        background-size: cover; 
        background-position:center;
        background-color:#F4C046">
  <!--[if gte mso 9]>
   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
   <v:fill type="frame" src="'../image.jpg'" color="#F4C046" />
   <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
   </v:rect>
  <![endif]-->
</td>

The above code stretches the image to fill the shape. Note that there are only two background VML types supported. Repeat (type=”tile”) or stretched (type=”frame”). Something like the CSS cover option never made it into VML.

If you want to find out more about this topic, I can recommend this article from litmus. There is also a good generator at https://backgrounds.cm/, however there is no option to switch between tiled and stretched image as above. For this you still need to manipulate the type attribute by hand.

adam