How to set background image and place contents over it in mobile app

How to set background image and place contents over it in mobile app

  

Hello,

In mobile app, I want to give background as image and want to put contents over that image like Login button and other sign up info.

How do I do that?

Thanks and Regards,

Suraj Borade

Hi suraj,

I believe you can change the CSS and add the background image to the the body tag. 

Kind regards,

Remco Dekkinga

Solution

Hi!

There are two ways do achieve that:

  • Use the CardBackground Pattern, it allows you to set a background image in the placeholder and then add an content you need inside another placeholder.
  • If you really need to change the background image of the screen, for now, you'll need CSS:
    .splash-screen, .login-screen {
        background-image: url(my-background.png); /* the URL of the background image */
        background-size: cover; /* occupy the whole screen without stretching */
    }

If your target is specifically the Splash and Login screens, we'll have good news for you by the end of may :) 

Solution

Hi Remco,

Thanks. I tried that approach but it was not showing me full image on screen.

Hi Dinis,

Your solution works perfect.

Thanks a lot

Suraj Borade