MM2
Outlook 07-13 Full Width Background Image
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"> </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]-->
</td>
</tr>
</table>
</body>
</html>
If anyone knows or stumbles upon a solution to this problem, please post it here.
I finally have a solution: Use another vml shape to hide the overlap. It should be 20px wide and be the same height as the full width background image. The page margin is always 20px so this works even on high dpi displays. This fix also gets rid of the horizontal scrollbar.
Amending the original code:
There you have it, bulletproof full width backgrounds!
Thanks! Works like a charm!
Awesome work! Now all we need is for there to be support for background-size. Still waiting...
I've been working on this problem. I've got some progress but it's not perfect, pretty hacky (innit always?)... and trying to accommodate a few other weird features like a "slant" mask.
I'm a few years late to this post but I'm working on the exact same issue. Did you ever resolve this issue?
I'm 99.9% certain Outlook doesn't support either one of those commands. There are certain inline CSS elements that will populate in Outlook but its a very short list. When designing for desktop email, its a much safer bet to stick to a standard width and surround that table with a solid 100% width background.