I've been racking my brain trying to get full width backgrounds to work on the Word based Outlooks and have yet to find a solution. I'm using the backgrounds.cm code for full width within a table cell, and I'm trying to achieve multiple full width backgrounds.
Here's my litmus test, you can see that the background is filling past where 100% width should end, but only on the right. The grey table below is a normal 100% wide table without any VML.
Here's my code. I didn't include any of my usual fixes, but the same thing happens when I do.
<!DOCTYPE html> <html> <head> <title>doop</title> </head> <body> <table cellpadding="0" cellspacing="0" border="0" height="388" width="100%"> <tr> <td background="http://i.imgur.com/LBm5fQw.jpg" bgcolor="#cccccc" 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:388px;"> <v:fill type="tile" src="http://i.imgur.com/LBm5fQw.jpg" color="#cccccc" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" height="388" width="100%" bgcolor="#444444"> <tr> <td background="http://i.imgur.com/0DSKanl.jpg" bgcolor="#444444" valign="top" height="300"> </td> </tr> </table> </body> </html>
Unfortunately, Outlook will add a margin around any element directly inside the body tag - even if you just have <body><table>...</table></body> and load up every element with no margins and no padding, Outlook will add a margin in there - it's pretty maddening!
The only way to get it to bleed to the edge in Outlook is to use the full body email background option on backgrounds.cm rather than the table cell option. I know you wanted to have stacked images, so I realize this isn't ideal, but you'd either need to have one large image in the background or a bit of a margin. Perhaps it can be visually minimized by putting a darker color in the background of the email.
Ah sorry David, bleeding into the edge is actually the opposite of what I was going for. But your answer does shed some light I suppose. So I guess there is a margin on the body, and VML just doesn't conform to the rules of rest of the HTML. I've tried some things on the VML side, but haven't been able to beat this bug.
<body bgcolor="#e9e9e9" style="width:100% !important; margin:0; padding:0; background-color:#e9e9e9;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td align="center" background="http://lorempixel.com/1500/318" style="background-position:top center; background-repeat:no-repeat;" valign="top"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); position:absolute;height:318px; width:1403px;mso-position-horizontal:center;mso-position-horizontal-relative:text; top:19px; z-index:-1" src="http://lorempixel.com/1500/318" /> <![endif]--> <div align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:16px; color:#0000ff; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; mso-line-height-rule:exactly; -webkit-font-smoothing:antialiased;">TESTING TESTING TESTING</div> <table width="600" cellpadding="0" cellspacing="0" border="0"> <tr><td width="600" height="318"></td></tr> </table> </td> </tr> </table> </body>
Keep in mind that some email clients, such as Gmail, do not support background positioning, so it'll appear against the top left at all times.
From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.Get started for free