如何在不裁剪不同尺寸的显示器的情况下设置背景图像？答案

【问题标题】：How to set backround image without cropping on different sizes of displays?如何在不裁剪不同尺寸的显示器的情况下设置背景图像？
【发布时间】：2015-06-15 17:30:20
【问题描述】：

我正在使用 Cordova 为移动设备开发简单的 HTML5 游戏。

我遇到了在不同分辨率的显示器上定位游戏对象的问题。

对象相对靠左放置||右侧和顶部位置。

但是背景图片有一些地方是用来放置和移动游戏对象的地方（例如spired在网上移动）..见下图

这意味着在某些设备上，由于背景图像被裁剪，蜘蛛“出局”了。我希望在所有设备上都可以看到相同的背景部分（从左到右和从上到下（底部并不重要，因为没有物体靠在底部，缺少的背景应该用黑色填充）。

请问我该怎么做？

后台的实际代码如下：

.gameBgImage {
    background: url("../img/objects/bg_game.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

视口标签设置为：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

非常感谢任何建议

【问题讨论】：

是否可以将所有图像合成为一张？
不，不是因为蜘蛛在网上和窗户上移动，蜡烛在窗户里燃烧等等。（不是所有的物体都放在截图中）。

标签： android html css cordova

【解决方案1】：

将背景大小设置为 100%。它将调整水平尺寸以使其适合，因此左右角都将可见。

将背景颜色设置为黑色，这样如果显示比例需要，底部将是该颜色

【讨论】：