I'm having a problem with full-width table background images cropping in iPhone view only. You can see what I mean here:

The overlayed content extends the width of the viewport, but just the background image is getting cut. I've tried a handful of things, but can't seem to get it to work. Here's the code:


<table style="width: 100%; table-layout: fixed; background: #1d4189; height: 200px" align="center" cellpadding="0" cellspacing="0"> 

            <tr>

                <td background="http://i.imgur.com/qFT2GFT.jpg">

                    <table style="width: 100%; table-layout: fixed;" align="center" cellpadding="0" cellspacing="0">

                      <tr>

                      <td></td>

                      <td style="width: 600px">       

                        <!-- Section 2 Content -->

                        <table style="width: 600px; table-layout: fixed" align="center" cellpadding="0" cellspacing="0">    

                            <tr>

                                <td style="padding: 20px; margin-top: 20px;">                

                                   <p style="color: #ffffff; text-align: left; font-size: 16px; font-weight: bold"><img src="http://i.imgur.com/hQVik38.png" style="padding: 0 0 10px 10px; border: 0" align="right">Breakout header goes here</p>

                                   <p style="color: #ffffff; text-align: left">Donec at augue at arcu pretium tempor sit amet vitae nibh. Donec consectetur nibh vitae leo tristique interdum. Morbi tempus orci id ipsum tincidunt, sed vulputate metus molestie. Aenean tincidunt sem libero, at venenatis odio posuere id.</p>

                                    <!-- Button -->

                                    <p style="margin-top: 0px; margin-bottom: 1em; line-height: 5px;">&nbsp;</p>

                                    <table cellspacing="0" cellpadding="0" align="left">

                                        <tbody>

                                            <tr>

                                                <td style="border-radius: 5px; color: #5c666f; display: block; border-bottom: 2px solid #cb7220;" width="320" height="40" align="center" bgcolor="#FA8D29"><a style="color: #ffffff; font-size: 16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 40px; width: 100%; display: inline-block;" href="http://www.google.com">Smaller button</a></td>

                                            </tr>

                                        </tbody>

                                    </table>

                                    <p style="margin-top: 0px; margin-bottom: 3em;">&nbsp;</p>

                                    <!-- End Button -->                                  

                                </td>

                            </tr>

                        </table>

                        </td>

                        <td></td>

                      </tr>

                  </table>

                </td>

            </tr>

        </table>

Any ideas why it would behave this way?