html - 在移动浏览器中，页脚图像不会重复，但背景图像会重复并且很好

Question

我的网页在桌面浏览器上运行良好，但当我在 iPhone 上打开它时，背景图像重复，但页脚图像不重复。他们有几乎相同的 css 代码，可能是什么问题？

这是我的 body 的CSS代码

body.login {
   margin:0;
   padding:0;
   position:relative; 
   background: #161616 url(../img/login-page-bg_01.png) left top repeat-x;
   font-family: roboto,"Helvetica Neue",helvetica,arial,sans-serif; 
   font-size:12px;
   line-height: 1.7em;
   height:750px;}

这是页脚的CSS代码

.login div.footer{
margin:0;
padding:0;
background:url(../img/login-page-bg-footer.png) left top repeat-x; 
position:relative;
bottom:0;
left:0;
width:100%;
height: 117px;
z-index:5;
    }

问题是正文背景图像重复但页脚图像只重复一次。

Answer 1

在没有看到所有代码的情况下，这些可能是问题:

• Mobile Safari 不能很好地呈现非常大(尺寸，而不是文件大小)的图像。
• width: 100% 仅当其父项具有设置的宽度时才有意义。
• 尝试删除 position、left 和 bottom。它们在这种情况下毫无用处。

要查看元素本身是否足够大，可以添加背景色:

background: red url(../img/login-page-bg-footer.png) left top repeat-x; 

我喜欢“红色”。红色是大还是小？