So im trying to make a 100% width hero image, I originaly had this is a background and it worked great but Gmail doesnt support background position so had to ditch that.

I then chacked my image to 100% and its container table to 100% and that works great in everything but outlook. Outlook then makes the preview window very long and breaks the email.

So i thought about adding a MSO statement to tell outlook the table will be 700px instead of 100%, but this still is not working. Can someone look at this code and help me?

i have a media query to hide the image and make it a background image so i can control the height for IOS (background and hide)

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->

<table cellpadding="0" cellspacing="0" border="0"  width="100%"   >
  <tr>
    <td class="background"><img src="images/hero.jpg" width="100%" class="hide" height="" alt=""/>
</td>
  </tr>
</table>

<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->