在各设备之间保持响应式背景图像的一致性

时间:2015-07-24 14:18:01

标签: html css responsive-design background-image

作为一名相对初学者,我似乎在努力在基于内容而非特定设备创建媒体查询之间找到适当的平衡点。

我现在正在与一个覆盖整个视口的css背景图片的着陆页进行摔跤。为了确保图像在所有移动设备上保持一致(即没有裁剪),我开始编写基于设备的媒体查询,每个查询加载不同版本的图像。当我为四个不同的iPhone(人像和风景)创建它们时,警报响起。

是否有更好的方法来实现我想要做的事情,或者我应该接受图像在不同设备之间会有所不同?

感谢所有的帮助。

史蒂夫

1 个答案:

答案 0 :(得分:0)

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

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

在所有设备上看起来相对较好。