HTML Email - Bulletproof Background Image - html

Question

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 http://backgrounds.cm/ 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.
<td class="full" width="300px" style="width: 300px;">
<table>
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" bgcolor="#7bceeb" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
<v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="width: 200px; height: 200px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</tr>
<table>
</td>

Answer 1

I am trying to make it work now.
It looks like the default for the image itself is 567 x 341.
i think this may work
<td class="full" width="300px" style="width: 300px;">
<table>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" width="200" height="200" bgcolor="#7bceeb" valign="top">
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
<v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="width: 200px; height: 200px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</tr>
<table>

Answer 2

A more robust method would be to use the CSS 'background-image' property - the HTML attribute 'background' still works, but it is technically depreciated. The background attribute also doesn't allow you to resize images, so that might be the problem that you are seeing.
Personally, this is how I usually approach it:
<td align="center" style="background-image: url('http://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: your-colour;"></td>
The other properties are to stop the background image repeating, position the image top and center, and stretch it out to cover the allocated space - the 'background-color' property is just a fallback colour for if images aren't automatically rendered, to maintain an overall design aesthetic.
There's a great litmus article on this here:
https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email
Hope this helps!