CSS背景覆盖

Question

我使用以下CSS代码完美地实现了全屏背景：

body {
  background-image: url('../images/backgrounds/<image>.jpg');
  background-size: cover;
  float:left;
  overflow: hidden
  }

尽管在移动端查看此内容时，iOs和IE Windows Mobile的背景平铺而非全屏显示。我知道可能需要为不同的移动操作系统准备不同的CSS文件，但不确定问题的确切原因，该如何在移动端实现图片全屏显示？

- Jonlee

Answer 1

将你的 background-image 更改为这个：

background: url('../images/backgrounds/<image>.jpg') no-repeat center center fixed; 

当这个方法行不通时，请查看CSS-Tricks的文章，了解关于完美全屏背景图像的内容。

有纯CSS解决方案以及使用jQuery的解决方案。

- Michael Schmidt

Answer 2

你应该使用一个在 x-y 方向上重复的封面。因此，这实际上是通过 css 中的背景图像和颜色来实现的技巧。

    body {
     background: url("images/bg3.jpg") repeat-x scroll 0 0 #EF9360;
    }

如果你的CSS背景图片顶部是蓝色的，那么你应该使用蓝色的背景...

在这里阅读更多 http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient1

- Cisum Inas

Answer 3

这可能是一个分辨率问题，获取屏幕大小变量并拉伸图像以填充屏幕。

并尝试添加background-repeat:no-repeat;

- Sarge