Another Outlook challenge. What I want is a full width background image (note: on a table, not the body) that is flush with other content on the page. Unfortuntely setting a full width background causes a 20px overhang due to the forced margins in Word web layout view.

Using the undocumented mso-width-relative: margin property in conjunction with mso-width-percent: 1000 works in Word... but not in Outlook, which is extremely frustrating. So close yet so far.

Here's the code I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Test</title>
<style>
v\:* {
    behavior: url(#default#VML);
    display: inline-block
}
o\:* {
    behavior: url(#default#VML);
    display: inline-block
}
w\:* {
    behavior: url(#default#VML);
    display: inline-block
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
}
</style>

<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

</head>

<body style="padding: 0; margin: 0; -webkit-text-size-adjust: none !important;">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#0058a5" width="100%">
  <tr>
    <td height="50">&nbsp;</td>
  </tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td height="150" bgcolor="#0086cc" background="http://i.imgur.com/HzZCJei.png" style="height: 150px;" align="center">
        <!--[if gte mso 9]>
        <v:rect stroke="f" fill="t" style="mso-width-percent: 1000;height:150px; position: relative; z-index: 0; mso-width-relative:margin;">
        <v:fill type="frame" src="http://i.imgur.com/HzZCJei.png" color="#0086cc" />
        </v:rect>
        <![endif]-->
        &nbsp;
    </td>
  </tr>
</table>
</body>
</html>

If anyone knows or stumbles upon a solution to this problem, please post it here.