title: HTML Email - Bulletproof Background Image
body: <p>I'm coding up HTML emails. I have a td containing a background image. It renders in all major email clients bar Outlook on Windows. I opted to use <a href="http://backgrounds.cm/" rel="nofollow noreferrer">http://backgrounds.cm/</a> as a workaround. My issue is the images height and width do not correspond to the values entered. The image appears squashed. I am using it as part of a nested table.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;td class="full" width="300px" style="width: 300px;"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
          &lt;tr&gt;
            &lt;td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" bgcolor="#7bceeb" valign="top"&gt;
              &lt;!--[if gte mso 9]&gt;
                          &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;"&gt;
                          &lt;v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" /&gt;
                          &lt;v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"&gt;
                          &lt;![endif]--&gt;
              &lt;div style="width: 200px; height: 200px;"&gt;
              &lt;/div&gt;
              &lt;!--[if gte mso 9]&gt;
                          &lt;/v:textbox&gt;
                          &lt;/v:rect&gt;
                          &lt;![endif]--&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/tr&gt;
      &lt;table&gt;
  &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>