Background image set using theme editor
Application Type
Traditional Web, Mobile, Reactive

Hello folks,

I want to set the background images to screens through the theme editor. I tried to apply as like this-

.taskDetail-screen {
    background-image: url('/Application/img/Application.login.png');
    background-size: cover;
    background-repeat: no-repeat;
}

 but it's not working. Any suggestions on how to set through theme editor.


Kind Regards,

Narendra Bhangale.

Solution

 Hi Narendra,

I used theme editor to setup background image for login and splash screen, login and splash screen has container in content placeholder with style class login-screen

Step 1: 

step 2 : CSS was automatically applied to this container style when using theme editor

Step 3: created my own screen and created my own class for the container named  custom-screen 

step 4: 

After defining custom class it worked for my respective screen. Please note that theme editor defines background only for login and splash screen.

output: 

https://saravanan-gamechanger.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/TEST_FORUMS/Horizontaldetail?_ts=637582645913987249


TESTFORUMS02062021.oml

Hi Narendra,

If you want to set background Image to the screen content, Try using the same CSS in Main content class 

i.e It is applied in Application Level.

Regards,

Saravanan Santhanam

Hi @Saravanan S,

It's a mobile application and I used CSS from a theme customizer. Bcoz of that or don't know why these options to apply CSS from stylesheet are not working. So I asked about to set bg-img using theme customizer.

Please suggest as per.

Thanks.

Solution

 Hi Narendra,

I used theme editor to setup background image for login and splash screen, login and splash screen has container in content placeholder with style class login-screen

Step 1: 

step 2 : CSS was automatically applied to this container style when using theme editor

Step 3: created my own screen and created my own class for the container named  custom-screen 

step 4: 

After defining custom class it worked for my respective screen. Please note that theme editor defines background only for login and splash screen.

output: 

https://saravanan-gamechanger.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/TEST_FORUMS/Horizontaldetail?_ts=637582645913987249


TESTFORUMS02062021.oml


Thanks @Saravanan S, with this solution CSS applied to screen and working well.

Regards,

Narendra Bhangale.

Hi Narendra,

you can write  your CSS in "screen-container" Class

Also attaching the  oml file.

Hope this helps you.


Thanks,

Diksha

backgoundImg.oml

Hi @Diksha Magre,

This is also working fine. But in my case, I used a mobile application and CSS applied using them customizer. So this is also not applicable to my problem. If possible you can try to use a mobile app with a theme customizer and try to use it so u will get my problem.


Thank you.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.