iPhone Div背景图像居中？

Question

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>

Answer 1

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

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