Mailchimp background images in table cells

I'm trying to create a mailchimp template, but I'm having compatibility issues with background images within table cells.

Something like this, just gets ignored by the likes of Outlook etc:

<td align="center" background="image-url.jpg" style="background-size: cover; background-position: center;">

I'm getting closer doing something like this:

<table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" background="image-url.jpg" style="background-size: cover; background-position: center;">
            <div>
                <!--[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="image-url.jpg" color="#7bceeb" />
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
                <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tr><td>Information etc</td></tr>
                </table>
                <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
                <![endif]-->
            </div>
        </td>
    </tr>
</table>

The problem I'm getting is the image is tiled. Is there a way to get it to match the

style="background-size: cover; background-position: center;"

Styling? Also, for some reason, it pushes the nested table over to the left instead of in the center. I presume it's the div that could be doing that.

Finally, is this the best option or is there a more bullet proof way of handling background images in table cells?

Thanks.

Solution

The Outlooks on Windows don’t support background-image in CSS nor the HTML background attribute. So VML is indeed the usual way to go. I wrote a post this year about mimicking background properties in VML. You'll need the following corresponding VML attributes to the <v:fill> element. In your case, it'd be:

background-size:cover : aspect="atleast"
background-repeat:no-repeat : type="frame"