背景图片调整大小：响应主题

Question

我的网页上的全屏背景图片遇到了一些问题。它通过桌面浏览器（IE，Chrome，Safari ......）看起来很棒，但当响应主题CSS启动时它不会调整到正确的分辨率。

对于桌面和响应式CSS：

background: url(background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-overflow-scrolling: touch;

我尝试使用不同的jpeg大小，具体取决于媒体最大宽度，我还尝试仅使用left:0px;应用背景图片，我尝试了background-size:contain;和background-size: cover !important;但没有成功。最令人沮丧的是：在firefox调试器中＆gt;响应式视图＆gt;它是完美的，但通过真正的手机/平板电脑背景被炸毁和像素化（当然你不能指望调试器工作）。

这也很难，因为网站在技术上都是一页......每个“虚拟页面”都是一个单独的div。

Firefox响应：

实际的iPhone响应（很难看到，但在下一页有一个新的图像，它是巨大的）：

Answer 1

我想出了调整图像大小的关键：

background: url(background.jpg) no-repeat local center top; 
        -webkit-background-size: 125% auto;

玩百分比并使用此^ webkit

http://kimili.com/journal/the-flexible-scalable-background-image-redux

^进一步阅读

Answer 2

如果适合您，可以尝试以下代码：

background: url(background.jpg) no-repeat center center fixed; 
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 background-size: 100% 100%;

Answer 3

我能想到的解决方案是设置适合小/移动屏幕的媒体查询并设置background-size:auto 100%，因为我理解的主要问题是使图像适合整个高度。 / p>