Hey all,

Trying something new! Decided to add a CSS3 fade in/out animation to my full width background. So far, it looks and works great. It's even responsive! However, from what I can see in preliminary testing, Gmail is the only ESP where the positioning of the second background is not playing nicely. Instead of overlapping the primary table, it's stacking underneath of it.
Any idea how I can either re-position the second background, or hide it specifically for Gmail? It's the <div id="back"> after the container table.

Code:

<body style="padding:0;margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:100%;background-color:#ffffff;" bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="06917c" class="backgroundTable">
    <tr>
        <td align="center" valign="top" bgcolor="#06917c">
      <!--[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://gallery.mailchimp.com/79251cc439f108dcbb476b8a1/images/3df58a31-44e2-48d8-bd39-f0b2d0d0cf59.png" color="#06917c" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->
            <div style="background: url(https://gallery.mailchimp.com/79251cc439f108dcbb476b8a1/images/3df58a31-44e2-48d8-bd39-f0b2d0d0cf59.png) top center no-repeat; background-size:cover;overflow:hidden;width:100%;min-height:350px;" width="100%">
            <table width="640" cellpadding="0" cellspacing="0" border="0" class="containerTable" style="position:relative!important;z-index:5;" align="center" valign="top">
                <tr>
                    <td align="center" valign="top" style="padding:45px 0 0 0;">
                        <h1 style="font-family: 'Asgalt','Abel',sans-serif;color:#adf71a;font-size:72px;">TITLE</h1>
                        <h2 style="font-family: 'Asgalt','Abel',sans-serif;color:#adf71a;font-size:36px;">subtitle</h2>
                    </td>
                </tr>
            </table>
            <div id="back" style="position:absolute!important;top:0;left:0;background: url(https://gallery.mailchimp.com/79251cc439f108dcbb476b8a1/images/d6450201-4407-4522-9084-09873cc7bcf1.png) top center no-repeat; background-size:cover;overflow:hidden;width:100%;z-index:1;min-height:350px;" width="100%">&nbsp;</div>
            </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
        </td>
    </tr>
</table>
</body>