Hi suraj,

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

Kind regards,

Remco Dekkinga

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 :) 

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

Hi Suraj,

Even I was having the same question as how to set a background image or add different color gradients to the screen. I had chalked out the solution and sharing the same with you below:

1. For adding background image to you main content, you need to open up the 'CSS' icon on the mid-top-left of your service studio screen

2. Then click on 'Base Theme' option and copy all the content/code from that window (use Ctrl+A from your keyboard)

3. Now click on your app name (you'll find it on top of your screen just beside 'Base Theme' and paste that copied content/code

4. Now go back to your app screen and double click on background of your main content i.e. where you want to set the image or color gradient and then again open up the 'CSS' icon on the mid-top-left of your service studio screen

5. Now you have to look for -

.main-content  {
    -servicestudio-display: flex;
    -servicestudio-flex-direction: column;
}

 6. Now here you can add image or any other related requirement for example I had added color gradient as you can see below

.main-content  {
    -servicestudio-display: flex;
    -servicestudio-flex-direction: column;
    background-image: conic-gradient(red, yellow, green);
}

Hope this help and resolve your issue.

Cheers,

Kunal Dhoble