iPhone Div背景图像居中？

I'm having a problem with my site's footer.

As you can see on your iPhone (in Safari) the footer image is not displaying correctly and spanning the site's width.

This is the code for the footer:

.footer {
  width: 100%;
  height: 118px;
  background: #000000 url(../images/footer.png) top center !important;
  margin: 70px auto 0 auto;
}

<div class="footer">
  <div style="width:1100px;height:118px;margin:auto;">
    <div id="mc_embed_signup">
      <form action="http://SaveWithPride.us7.list-manage.com/subscribe/post?u=0beccc5a2d913b0527a748edc&amp;id=cb6e398bc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <input type="email" value="" name="EMAIL" class="email footer-field" id="mce-EMAIL" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" required>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button footer-submit"></div>
      </form>
    </div>
    <div style="width:334px;height:118px;float:right;background:transparent;">
      <div class="socialtext">save with pride, socially:</div>
      <div class="twitter"></div>
      <div class="facebook"></div>
      <div class="footertext">© 2013 SaveWithPride.com&nbsp&nbspAll Rights Reserved.&nbsp&nbsp<a href="adamdworak.com">Design by A/D</a></div>
    </div>
  </div>
</div>

What am I doing wrong here? The footer background (as it appears now) does not stretch to the edge of the browser on iPhone and seems like its not centered. I am trying to get it centered and at 100% width as it shows on my computer.

</div>

So the footer element background is not as wide as the screen? Try adding this:

.footer {
    background-size: 100% 100%; /* stretches background */
}

Try it removing the width from the .footer css

Also if you wish to fit the page within iPhone screen change the width of the .footer child div to 940px as shown below

<div class="footer">
   <div style="width:940px;height:118px;margin:auto;">

I say change the width because .footer is set to 100% width which will be the equivalent of the iphone screen width therefore the image will stretch only to the screen width. The problem is that the child div may have a width bigger than the iPhone screen width which will require the user to scroll further right and is the reason why the image isn't stretched.