How to Set a Background Image And Make It Responsive in UI5 Application?

I am trying to display an image as page background image using CSS. The image is not responsive on mobile device.

I am using the following code to display background image for a particular page in application:

CSS

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

XML

<Page class="page2BgImg">

I tried the techniques given in this blog but it did not help me in getting the desired result. What are the possible ways to get responsive image on mobile?

Solution

In order to set a background image, the property backgroundImage of either sap.m.App or .Shell can be used together with backgroundDesign="Transparent" in sap.m.Page:

<AppOrShell backgroundImage="myImageSrc" backgroundOpacity="1">

<Page backgroundDesign="Transparent">

No matter which device, the image is always displayed..

Centered horizontally
With the background-size: cover

Here is a demo: https://output.jsbin.com/nocoday