如何在UI5应用程序中设置背景图像并使其响应？

Question

我正在尝试使用CSS将图像显示为页面背景图像。该图像在移动设备上无响应。

我使用以下代码在应用程序中显示特定页面的背景图像：

CSS

.page2BgImg {
  background-image: url('../img/mainScr.jpg');
  background-size: 100% 100%;
}

XML

<Page class="page2BgImg">

我尝试了this blog中给出的技巧，但它并没有帮助我获得理想的结果。在移动设备上获取响应式图像的可能方法是什么？

Answer 1

要设置背景图像，可以使用属性backgroundImage of sap.m.App。

<App id="myApp"
  backgroundImage="myImageSrc"
/>

无论哪种设备，图像始终显示..

• 水平居中
• 使用background-size: cover

以下是演示： https://output.jsbin.com/casuzud