Full Width Background (single table cell) exceeding full width

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.
https://litmus.com/pub/628657c/screenshots

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>
davidaf davidaf, 2 years ago

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.


The Campaign Monitor Blog – HTML email smarts to go with your good looks
zazzyzeph, 2 years ago

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.

BThies BThies, 2 years ago

Try this:

<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.


Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098