拥有适用于所有设备的图像背景的正确方法是什么？

Question

我正在设计一个背景图片的网站（应该拉伸并覆盖整个页面）。

这是我正在使用的CSS：

html, body {
  margin: 0;
  padding: 0;
  min-height:100%;
}

body {
  background:url('../img/wide.jpg') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100%;
}

但是，这会导致比我的图像宽的屏幕尺寸在屏幕的顶部和底部出现白条。

公认的最佳方法是什么？它是仅 CSS 的解决方案吗？我是否需要为每个设备准备一堆不同宽度的不同图像？它是 jQuery 需要读取屏幕尺寸并修改 CSS 的东西吗（不知何故 - 不确定哪种 CSS 可以解决这个问题）？

如有任何指导，我们将不胜感激。

Answer 1

添加父级 div 将像这样包装整个站点：

<body>
    <div class="bodyWrap">
        ..YOUR SITE..
    </div>
</body>

然后将此添加到您的 css:

html, body {
    margin: 0;
    padding: 0;
    height:100%;
    min-height:100%;
}
.bodyWrap    {
    background:url('../img/wide.jpg') center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 2

double 值是怎么回事？ background-size: cover 应该完全按照您的意愿进行，但是您正在用 background-size: 100% 覆盖该值，这不会按照您的意愿进行。为此你需要掩护。删除最后一行。

body {
  background-size: cover;
  background-size: 100%; /* this rule will overwrite cover */
}

看看区别。

background-size: 100%;

background-size: cover;

所以你最终应该得到：

body {
    background:url('http://upload.wikimedia.org/wikipedia/commons/4/4c/Bananas.jpg') center center no-repeat;
    background-size: cover;
}

(注意：我认为浏览器支持good enough不需要前缀。)

拥有适用于所有设备的图像背景的正确方法是什么？

What is the correct way of having an image background that works on all devices?

html

css

jquery

background-image