Hey guys,

I'm having all the usually bumps with my emails rendering in Outlook 2016. I have a background image with text aand a button overlaid and while the background image does display it seems the mso-width-percent: 1000 is overriding my max-width. So if I adjust the size of the view window in Outlook it stretches or tiles the background image.

Anyone else running into this problem or have any tips on how to stop this?

Here is my code:


<!doctype html>
<html xmlns="“http://www.w3.org/1999/xhtml”" xmlns:v="“urn:schemas-microsoft-com:vml”" xmlns:o="“urn:schemas-microsoft-com:office:office”">
  <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <!--[if gte mso 9]><xml>
          <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
          </xml><![endif]--> 
    <!--Variables--> 
    <meta class="mktoColor" id="bodyBackground" mktoname="Body Background" default="#efefef"> 
    <meta class="mktoNumber" id="leftPadding" mktoname="Left Padding" default="15" min="0" max="" units="px" step="1" mktomodulescope="true"> 
    <meta class="mktoNumber" id="rightPadding" mktoname="Right Padding" default="15" min="0" max="" units="px" step="1" mktomodulescope="true"> 
    <meta class="mktoNumber" id="topPadding" mktoname="Top Padding" default="15" min="0" max="" units="px" step="1" mktomodulescope="true"> 
    <meta class="mktoNumber" id="bottomPadding" mktoname="Bottom Padding" default="15" min="0" max="" units="px" step="1" mktomodulescope="true"> 
    <meta class="mktoColor" id="moduleBackground" mktoname="Module Background" default="#ffffff" mktomodulescope="true"> 
    <meta class="mktoColor" id="featureBackground" mktoname="Feature Background" default="#efefef" mktomodulescope="true"> 
    <meta class="mktoColor" id="featureBorder" mktoname="Feature Border Color" default="#efefef" mktomodulescope="true"> 
    <meta class="mktoNumber" id="spacerHeight" mktoname="Spacer Height" default="20" min="0" max="" units="" mktomodulescope="true"> 
    <meta class="mktoColor" id="dividerColor" mktoname="Divider Color" default="#d3d3d3" mktomodulescope="true"> 
    <meta class="mktoNumber" id="dividerHeight" mktoname="Divider Height" default="1" min="0" max="" units="" mktomodulescope="true"> 
    <meta class="mktoList" id="imageAlign" mktoname="Align Image" values="left,center,right" default="center" mktomodulescope="true"> 
    <meta class="mktoList" id="textAlign" mktoname="Align Text" values="left,center,right" default="left" mktomodulescope="true"> 
    <meta class="mktoList" id="buttonAlign" mktoname="Align Button" values="left,center,right" default="center" mktomodulescope="true"> 
    <meta class="mktoNumber" id="backgroundWidth" mktoname="Background Width" default="650" min="" max="650" step="1" mktomodulescope="true"> 
    <meta class="mktoNumber" id="backgroundHeight" mktoname="Background Height" default="240" min="" max="" step="1" mktomodulescope="true"> 
    <meta class="mktoColor" id="fallbackColor" mktoname="Fallback Color" default="#0099CC" mktomodulescope="true"> 
    <meta class="mktoColor" id="buttonColor" mktoname="Button Color" default="#7ab800" mktomodulescope="true"> 
    <meta class="mktoColor" id="buttonborderColor" mktoname="Button Border Color" default="#7ab800" mktomodulescope="true"> 
    <meta class="mktoNumber" id="borderRadius" mktoname="Border Radius" default="10" min="0" max="" mktomodulescope="true" units="px"> 
    <meta class="mktoImg" id="heroBackgroundImage" mktoname="Hero Background Image" default="http://solutions.healthcaresource.com/rs/566-ZWM-880/images/Header 650 x 230.PNG"> 
    <meta class="mktoString" id="callToActionLink1" mktoname="Button Link 1" default="http://mylink" mktomodulescope="true"> 
    <meta class="mktoString" id="callToActionLink2" mktoname="Button Link 2" default="http://mylink" mktomodulescope="true"> 
    <title>Healthcare Talent, Performance &amp; Learning Management | Healthcare Source</title> 
    <style>
      /* CLIENT-SPECIFIC STYLES */
      img{-ms-interpolation-mode: bicubic;} 
      /* Force IE to smoothly render resized images. */
      #outlook a{padding:0;} 
      /* Force Outlook 2007 and up to provide a "view in browser" message. */
      table{mso-table-lspace:0pt;mso-table-rspace:0pt;} 
      /* Remove spacing between tables in Outlook 2007 and up. */
      p, a, li, td, blockquote{mso-line-height-rule:exactly;} 
      /* Force Outlook to render line heights as they're originally set. */
      a[href^="tel"], a[href^="sms"]{color:inherit;cursor:default; text-decoration:none;} 
      /* Force mobile devices to inherit declared link styles. */
      p, a, li, td, body, table, blockquote{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} 
      /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
      .ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font{line-height:100%;}
      /* Force Outlook.com to display line heights normally. */
            li{
              margin-bottom:5px;
          }
      @media only screen and (max-width:650px){
        #bodyTable{
          width:100%;
        }
        img{
          max-width:100%;
          height:auto;
        }

        .stack{
          padding-top:10px !important;
          padding-right:5% !important;
          padding-bottom:5px !important;
          padding-left:5% !important;
        }
        .tableStack{
          width:100% !important;
        }
        .desktopPad{
          display: none !important;
        }
        .centerImage img{
          margin-left:auto !important;
          margin-right:auto !important;
          display:block !important;
        }
          .mobileTopPad{
              padding-top:20px;
          }
          .hide{
              display:none !important;
          }
        .head-adjust{
          font-size:20px!important;
        line-height: 18px!important;
        font-family: Trebuchet, Tahoma, sans-serif;}
          }
      }
    </style> 
    <!--[if gte mso 9]>
<style type="text/css">
table#outlookPadColumn{
width:35% !important;
padding-right:2% !important;
max-width: 650px; !important;
}
td{
font-family:Trebuchet, Tahoma, sans-serif !important;
}
</style>
<![endif]--> 
  </head> 
  <body bgcolor="${bodyBackground}" style="background:${bodyBackground};"> 
    <table width="100%" max-width="650px" border="0" cellspacing="0" cellpadding="0" style="background:${bodyBackground};mso-padding-alt: 0px 0px 0px 0px;"> 
      <tbody> 
        <tr> 
          <td> 
            <!--Body Table--> 
            <table id="bodyTable" width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-left:auto;margin-right:auto;"> 
              <tbody> 
                <tr> 
                  <td id="container" class="mktoContainer">
                    <table class="mktoModule" id="logo" mktoname="Logo" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;"> 
                      <tbody> 
                        <tr> 
                          <td class="stack" align="${imageAlign}" style="background-color:${moduleBackground}; padding: 10px 40px 10px 40px;"> 
                            <div class="mktoText" id="logo1" mktoname="Logo">
                              <a href="http://www.healthcaresource.com"><img src="http://solutions.healthcaresource.com/rs/566-ZWM-880/images/HCS-Logo-FullColor-long.png" alt="" border="0" height="44" width="250" style="display:block;"></a>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" id="headerImage" mktoname="Header" cellpadding="0" cellspacing="0" border="0" width="100%" max-width="650px"> 
                      <tbody> 
                        <tr> 
                          <td background="${heroBackgroundImage}" bgcolor="#efefef" valign="top" max-width="650px"> 
                            <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
        <v:fill type="frame" src="${heroBackgroundImage}" color="#efefef" max-width="650px"/>
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]--> 
                            <div> 
                              <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;"> 
                                <tbody> 
                                  <tr> 
                                    <td align="center" valign="middle"> 
                                      <table> 
                                        <tbody> 
                                          <tr> 
                                            <td style="padding-left: 25px; padding-right:25px; padding-top:50px; font-family: Trebuchet, Tahoma, sans-serif; color:#ffffff; font-size:24px; line-height:28px; text-align:${textAlign};"> 
                                              <div class="mktoText" id="headline" mktoname="Headline">
                                                <div style="text-align:center; padding-left:${leftPadding}; padding-right:${rightPadding};">
                                                   Performance Is the Heart of Your Organization 
                                                </div>
                                              </div> </td> 
                                          </tr> 
                                          <tr> 
                                            <td valign="top" style="text-align: center; padding: 1px 20px 1px 20px; font-family: Trebuchet, Tahoma, sans-serif; font-size: 15px; line-height: 20px;"> <p style="margin: 0;"> </p> </td> 
                                          </tr> 
                                          <!-- Button : BEGIN --> 
                                          <tr> 
                                            <td class="stack" style="padding-top:${topPadding}; padding-left:${leftPadding}; padding-right:${rightPadding};"> 
                                              <table align="${buttonAlign}" border="0" cellpadding="0" cellspacing="0" bgcolor="${buttonColor}" style="border:1px solid ${buttonborderColor}; border-top-right-radius:${borderRadius}; border-bottom-right-radius: ${borderRadius}; border-bottom-left-radius: ${borderRadius}; border-top-left-radius: ${borderRadius};"> 
                                                <tbody> 
                                                  <tr> 
                                                    <td style="font-family:Trebuchet MS, Tahoma, sans-serif; font-size:15px; color:#ffffff; padding-top:15px; padding-right:20px; padding-bottom:15px; padding-left:20px;"> 
                                                      <div class="mktoText" id="buttonlink1" mktoname="Button Link 1">
                                                        <a href="${callToActionLink1}" style="text-decoration:none; color:#ffffff;">Register Now!</a>
                                                      </div> </td> 
                                                  </tr> 
                                                </tbody> 
                                              </table> </td> 
                                            <!-- Button : END --> 
                                          </tr> 
                                        </tbody> 
                                      </table> </td> 
                                  </tr> 
                                  <tr> 
                                    <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                              <!--[if mso]>
 </td>
</tr>
</table>
<![endif]--> 
                            </div> 
                            <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]--> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule desktopPad" id="spacerModule" mktoname="Spacer" width="100%" height="${spacerHeight}" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;"> 
                      <tbody> 
                        <tr> 
                          <td class="desktopPad" height="${spacerHeight}" style="background-color:${moduleBackground}; line-height:${spacerHeight}px;font-size:${spacerHeight}px;">&nbsp;</td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" id="fullWidthText" mktoname="Full Width Text" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;"> 
                      <tbody> 
                        <tr> 
                          <td class="stack" style="background-color:${moduleBackground}; padding-top:${topPadding}; padding-bottom:${bottomPadding}; padding-left:${leftPadding}; padding-right:${rightPadding}; font-family:Trebuchet MS, Tahoma, sans-serif; font-size:15px; line-height:24px; color:#45555f; text-align:${textAlign}"> 
                            <div class="mktoText" id="fullcopy" mktoname="Copy">
                              There’s no doubt that effective performance is important for the success of your employees and the health of your organization, but do you consider it to be the heart of your overall talent management strategy? 
                              <br> 
                              <br> 
                              <span style="color: #0099cc;"><strong>Join our webinar</strong></span> to understand how performance management drives: Employee Engagement, Employee Retention, HCAHPS and Patient Satisfaction, and Profitability. 
                              <br> 
                              <br> 
                              <strong>Webinar:</strong> 
                              <span style="color: #0099cc;"><strong>Discover Why Performance Is the Heart of Your Organization</strong></span> 
                              <br> 
                              <strong>Date:</strong> Thursday, February 8, 2018 at 2:00 p.m. ET 
                              <br> 
                              <strong>Presented by:</strong> Tabitha Lane, Director, Product Strategy, HealthcareSource and Collin Spink, Solution Consultant, HealthcareSource 
                              <br> 
                              <br>Topics of Discussion Include:Bullet point 1 
                              <br> 
                              <ul> 
                                <li>Why employee performance matters to your patients and your organization</li> 
                                <li>How you can empower your managers and leaders to lead, develop, and coach your staff</li> 
                                <li>Technology and tools to ensure healthy performance</li> 
                              </ul> You'll gain new perceptions about the importance of employee performance management, along with techniques you can use to reinforce your performance initiatives.
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" id="buttonModule" mktoname="Button" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;"> 
                      <tbody> 
                        <tr> 
                          <td class="stack" style="background-color:${moduleBackground}; padding-top:${topPadding}; padding-bottom:${bottomPadding}; padding-left:${leftPadding}; padding-right:${rightPadding};"> 
                            <table align="${buttonAlign}" border="0" cellpadding="0" cellspacing="0" bgcolor="${buttonColor}" style="border:1px solid ${buttonborderColor}; border-top-right-radius:${borderRadius}; border-bottom-right-radius: ${borderRadius}; border-bottom-left-radius: ${borderRadius}; border-top-left-radius: ${borderRadius};"> 
                              <tbody> 
                                <tr> 
                                  <td style="font-family:Trebuchet MS, Tahoma, sans-serif; font-size:15px; color:#ffffff; padding-top:15px; padding-right:20px; padding-bottom:15px; padding-left:20px;"> 
                                    <div class="mktoText" id="buttonlink2" mktoname="Button Link 2">
                                      <a href="${callToActionLink2}" style="text-decoration:none; color:#ffffff;">Register Now!</a>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" id="featureSection" mktoname="Feature" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%; padding-top:20px; padding-bottom:20px;"> 
                      <tbody> 
                        <tr> 
                          <td class="stack" style="background-color:${featureBackground}; padding-top:${topPadding}; padding-bottom:${bottomPadding}; padding-left:50px; padding-right:50px; font-family:Trebuchet MS, Tahoma, sans-serif; font-size:15px; line-height:24px; color:#45555f; text-align:${textAlign}"> 
                            <div class="mktoText" id="featurecopy" mktoname="Copy">
                              This webinar is eligible for recertification credits with SHRM and HRCI. 
                              <br> 
                              <br> 
                              <strong>P.S.</strong> Unable to attend the live webinar? 
                              <a href="http://solutions.healthcaresource.com/2567-performance-is-the-heart-webinar.html?utm_campaign=2567&amp;utm_medium=webinar&amp;utm_source=email" style="text-decoration: none; color: #00a1de; font-weight: bold;" target="_blank">Register anyway</a> to get the recording. Excited about this webinar? 
                              <strong style="text-decoration: none; color: #00a1de; font-weight: bold;"><a href="{{system.forwardToFriendLink:default=edit%20me}}" style="text-decoration: none; color: #00a1de; font-weight: bold;">Invite a Friend</a>!</strong>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" id="footerModule" mktoname="Social Footer" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%; background-color: #ffffff;"> 
                      <tbody> 
                        <tr> 
                          <td class="stack" style="background-color:${moduleBackground}; padding-top:25px; padding-bottom:25px; padding-left:${leftPadding}; padding-right:${rightPadding};"> 
                            <div class="mktoText" id="socialicons" mktoname="Social">
                              <table align="center" width="200" border="0" cellpadding="0" cellspacing="0"> 
                                <tbody> 
                                  <tr> 
                                    <td align="center"> <a href="http://education.healthcaresource.com/" title="blog"><img src="http://solutions.healthcaresource.com/rs/566-ZWM-880/images/social-grey-blog.png" alt="" border="0" height="25" width="25" style="display:block;"></a> </td> 
                                    <td align="center"> <a href="https://www.facebook.com/HealthcareSource" title="facebook"> <img src="http://solutions.healthcaresource.com/rs/566-ZWM-880/images/social-grey-facebook.png" width="21" height="26" border="0" style="display:block;"> </a> </td> 
                                    <td align="center"> <a href="https://www.linkedin.com/company-beta/115459/" title="linkedin"> <img src="http://solutions.healthcaresource.com/rs/566-ZWM-880/images/social-grey-linkedin.png" width="25" height="25" style="display:block;"> </a> </td> 
                                    <td align="center"> <a href="https://twitter.com/quality_talent" title="twitter"><img src="http://solutions.healthcaresource.com/rs/566-ZWM-880/images/social-grey-twitter.png" alt="" border="0" height="25" width="25" style="display:block;"></a> </td> 
                                  </tr> 
                                </tbody> 
                              </table>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" id="legalFooter" mktoname="Legal" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%; background-color: #ffffff;"> 
                      <tbody style="background-color: #ffffff;"> 
                        <tr> 
                          <td style="padding: 10px 20px 10px 20px; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 300; line-height: 18px; color: #666666; text-align: center; font-weight:normal;"> 
                            <div class="mktoText" id="legalcopy" mktoname="Legal Copy">
                              <span style="font-family: Lato, sans-serif; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; 
text-decoration-color: initial; float: none; display: inline !important;">© 2018 Healthcare Source HR, Inc. All Rights Reserved.&nbsp;</span> 
                              <br style="color: #666666; font-family: Lato, sans-serif; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; 
background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;"> 
                              <span style="font-family: Lato, sans-serif; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 
0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">100 Sylvan Road, Suite 100 | Woburn, MA 01801 | +1 800.869.5200 |&nbsp;</span> 
                              <a href="mailto:solutions@healthcaresource.com" style="text-decoration: none;">solutions@healthcaresource.com</a>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule hide" id="gmailModule" mktoname="Gmail Full Width Hack" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;"> 
                      <tbody> 
                        <tr> 
                          <td height="1" class="hide" style="min-width:650px;opacity:0; font-size:0px;line-height:0px;"> <img height="1" src="#" style="min-width: 650px;max-height:0px; text-decoration: none; border: none; -ms-interpolation-mode: bicubic;"> </td> 
                        </tr> 
                      </tbody> 
                    </table></td> 
                </tr> 
              </tbody> 
            </table> 
            <!--End Body Table--> </td> 
        </tr> 
      </tbody> 
    </table>  
  </body>
</html>