Setting a background image on an HTML Email for Hotmail/Outlook - html

Question

We've been making an HTML Email with a background image in the header and some text over it. We got into some trouble to make it happen but looks like I managed to make it look in most readers though some Outlook ones didn't display the image as expected but that could be acceptable.
What I found interesting is that there doesn't seem to be any way at all to display a background image on Hotmail/Outlook.com/MSN reader. I've been using litmus.com to verify and preview and a code analysis gives me this info:
background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported
So while I can read some answers around Stackoverflow saying you can make it work on Hotmail using the full "background" property as Hotmail has turned into outlook.com I have the feeling such thing isn't supported anymore?
I've also used this code to display it on Outlook (I think):
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
The piece of code where we have the header looks like this:
<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!-- Wrapper -->
<table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!-- Nav Mobile Wrapper -->
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" width="100%">
<!-- SORTABLE -->
<div class="sortable_inner ui-sortable">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="100" width="100%"></td>
</tr>
</table><!-- End Space -->
<!-- Text -->
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">
<p cu-identify="element_0033719102905743314">
<span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>
</td>
</tr>
</table>
<table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="20" width="100%"></td>
</tr>
</table>
<!-- Button -->
<!-- End Button -->
<div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->
<table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10" width="100%"></td>
</tr>
</table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->
</div><!-- End SORTABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper -->
</div>
<!--[if gte mso 9.]>
</v:textbox>
</v:fill></v:rect>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- Header End -->
We bought a template to do this and are trying to modify it, the template included a background image but on testing it on different readers looks like not even the default template does it right :( (In fact I've had to be fixing it around and now looks acceptable in most readers but Outlook.com)
Thanks a lot for any help :)

Answer 1

Well, after some more research I found that not any single company sending me a campaign email was using background images (including companies like Amazon, the BBC, or many others with plenty of cash and incredible frontenders) which gave me a good guess that using background images on HTML Emails may not be a good approach.
I'm not sure if there is any way to make them work in Hotmail/MSN Live/Outlook.com as Litmus says it's not supported atm (March 2015) but we decided to change the design and make it work without background images.
We can still use images, just making sure we don't need them to be on the background. That was our final solution.
Thanks to those who spent their time trying to help though :)

Answer 2

Your code looks good to me, this is a snippet from one of my emails which works across all platforms.
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">#DOMAINNAME# is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>