title: Some background colors not loading for Outlook 2016
body: <p>Been trying to follow this article on making future proof responsive email templates:</p>
  
  <p><a href="https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919" rel="nofollow noreferrer">https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919</a></p>
  
  <p>What I'm working on looks good in most clients, but Outlook isn't rendering some of the background colors.</p>
  
  <p>Should look like this with gray borders (this is in Gmail):</p>
  
  <p><a href="https://i.stack.imgur.com/P12Ld.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P12Ld.png" alt="enter image description here"></a></p>
  
  <p>Outlook 2016, however, looks like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/r8gVH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r8gVH.png" alt="enter image description here"></a></p>
  
  <p>Right now I am just trying to get the gray border to show up. Will figure out why the background image isn't later.</p>
  
  <p>Anyway, here is what I have so far. Any suggestions on how to get this gray background to show up the entire width of email body like it does in Gmail?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;!--[if !mso]&gt;&lt;!--&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;!--&lt;![endif]--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
      &lt;!--[if (gte mso 9)|(IE)]&gt;
      &lt;style type="text/css"&gt;
          table {border-collapse: collapse;}
      &lt;/style&gt;
      &lt;![endif]--&gt;
      &lt;style type='text/css'&gt;
          /* Basics */
          body {
              margin: 0 !important;
              padding: 0;
              background-color: #ffffff;
              font-family: Arial, Helvetica, sans-serif;
          }
  
          table {
              border-spacing: 0;
              font-family: sans-serif;
              color: #333333;
          }
  
          img {
              border: 0;
          }
  
          div[style*="margin: 16px 0"] { 
              margin:0 !important;
          }
  
          .content {
              width: 100%;
              table-layout: fixed;
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%;
              background-color: #7E8083;
          }
  
          .webkit {
              max-width: 902px;
              margin: 0 auto;
          }
  
          .outer {
              margin: 0 auto;
              width: 95%;
              max-width: 902px;
              background-color: #1D428A;
              color: #FFF;
          }
  
          .content-area {
              background-position: center;
              background-size: 100% 100%;
          }
  
          .footer {
              font-size: 10px;
              -webkit-text-size-adjust: 95%;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="header" align="center"&gt;
          &lt;table cellpadding="20"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;img src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" width="150" alt="The Company Logo"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div bgcolor="#7E8083" class="content"&gt;
          &lt;div class="webkit"&gt;
              &lt;!--[if (gte mso 9)|(IE)]&gt;
              &lt;table width="902px" align="center"&gt;
              &lt;tr&gt;
              &lt;td&gt;
              &lt;![endif]--&gt;
              &lt;table height="381" class="outer" align="center"&gt;
                  &lt;tr align="center"&gt;
                      &lt;td background="https://marketing-image-production.s3.amazonaws.com/uploads/8.gif" align="center" class="content-area"&gt;
                          [content here]
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;!--[if (gte mso 9)|(IE)]&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;![endif]--&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="footer" align="center" size="10"&gt;
          &lt;p&gt;If you would like to unsubscribe and stop receiving these emails
          &lt;a href="[unsubscribe]"&gt;click here&lt;/a&gt;. We encourage you not to do so to ensure you receive important emails related to your account.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>