使用apache cordova跨平台全屏HTML5背景图像

Question

简而言之，如何设计HTML5的全屏背景图像（保持宽高比）（移植到不同的平台/设备）？

我使用英特尔XDK / Apache cordova-3.x构建HTML5应用程序。从我理解的link，我可以为不同分辨率/屏幕尺寸的启动画面/图标配置不同的图像。

有没有什么方法可以像启动画面图像一样指定我的背景图像？或者我应该使用此link中提到的响应式HTML设计？

Answer 1

我建议使用响应式设计，利用CSS将图像的高度和宽度设置为100％，或者使用各种屏幕尺寸的媒体查询。

例如，

/*Background Full Screen Image*/ 
body {
    background: url("images/img.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*Background Full Screen Image if the document is smaller than 300 pixels wide*/
@media screen and (max-width: 300px) {
   body {
        background: url("images/img.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
   }
}