使响应式背景图像在设备间保持一致

Question

作为一个相对初学者，我似乎很难在基于内容而不是特定设备创建媒体查询之间找到适当的平衡。

我现在正在为一个 css 背景图片覆盖整个视口的着陆页而苦恼。为了确保图像在所有移动设备上保持一致（即不裁剪），我开始编写基于设备的媒体查询，每个媒体查询加载不同版本的图像。当我为四种不同的 iPhone（纵向和横向）创建它们时，警钟已经响起。

是否有更好的方法来实现我正在尝试做的事情，或者我应该接受图像在不同设备上的外观不同？

感谢所有帮助。

史蒂夫

Answer 1

http://sixrevisions.com/css/responsive-background-image/

body {
  background: url(background-photo.jpg) center center cover no-repeat fixed;
}

这在所有设备上看起来应该都比较好。