Use background-image AND center without gap for Outlook - css

Question

Since using background images in an HTML mail for outlook 2007-2016 is not supported by CSS I tried this workound with VML:
This is my DOM before using VML:
<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" bgcolor="#F4C046"
style="background-image: url('../image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color:#F4C046;border:solid">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--- some content -->
</table>
</td>
</tr>
</table>
Now this works for most email clients, but in outlook 2007-2016 the background-image is ignored and in renders without the background color like this:
When I try to use the "VML" solution my code looks like this:
<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" bgcolor="#F4C046"
style="background-image: url('../image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color:#F4C046;border:solid">
<!--[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="../myimg.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--- some content -->
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Now the background is working, hover the table thats on the background is not centered anymore:
Also if I make the outlook window small a gap appears:
I could wrap my table that should be centered one more time with a full with table like this:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--- some content -->
</table>
</td>
</tr>
</table>
to fix the centering:
However the gap still appears:
Any idea how to properly use background image and center the content, without the gap issue?

Answer 1

Not sure whats wrong with your code, but maybe you can use this I found in an old email I made. It works with outlook 2010,13,16. I hope it helps you.
NB: Dont mind all the classes :)
<table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
class="w394 w355-413 w300-374" width="640">
<tbody>
<tr>
<td align="left" background="https://placeimg.com/640/540/arch" bgcolor="#efefef"
class="w394 w355-413 w300-374 break h400" height="540"
style="background-size:640px 960px;repeat:no-repeat;" width="640">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:540px;">
<v:fill type="tile" src="https://placeimg.com/640/540/arch" color="#efefef" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
class="w280 w240-413" valign="middle" width="320">
<tbody>
<tr>
<td align="center" class="f28"
style="padding:20px;font-size:36px;line-height:40px;font-family: Arial;font-weight: 400;color:#be1f24;"
valign="top">Lorem <b>IPSUM</b> dolor <b>sit </b>amet</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>