iPhone Div背景图像居中？答案

【问题标题】：iPhone Div Background Image Centering?iPhone Div背景图像居中？
【发布时间】：2013-12-01 04:43:21
【问题描述】：

my site 的页脚有问题。

正如您在 iPhone（在 Safari 中）上看到的那样，页脚图像未正确显示并跨越网站的宽度。

这是页脚的代码：

.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>

我在这里做错了什么？页脚背景（如现在所示）不会延伸到 iPhone 上的浏览器边缘，并且看起来好像没有居中。我正在尝试让它居中并保持 100% 的宽度，就像它在我的计算机上显示的那样。

【问题讨论】：

对不当语言投反对票，保持文明。

标签： php jquery html css wordpress

【解决方案1】：

所以页脚元素背景没有屏幕那么宽？尝试添加：

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

【讨论】：

很好，试了一下，但在 iphone 的右侧仍然有点短。有什么想法吗？
尝试将页脚背景设为黑色，以确保页脚实际为 100% 宽度。在我的 iPad 上，它的右侧也很短。页脚是否在另一个元素中，可能会使其保持简短？

【解决方案2】：

尝试从.footer css 中删除宽度

此外，如果您希望页面适合 iPhone 屏幕，请将 .footer 子 div 的宽度更改为 940px，如下所示

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

我说更改宽度是因为 .footer 设置为 100% 宽度，这将相当于 iphone 屏幕宽度，因此图像只会拉伸到屏幕宽度。问题是子 div 的宽度可能大于 iPhone 屏幕宽度，这将需要用户向右滚动，这也是图像没有被拉伸的原因。

【讨论】：