aantsypau
Posts: 26
Joined: Wed May 24, 2023 7:57 am

Screen Background Image for Light and Dark Modes

I’d like to update the background of the app (I believe this is referred to as the Index Screen) with a new image for both dark and light modes (see attached screenshot). From what I understand, I’ll likely need to update the 'Extra SCSS' in Theme > Dark > Extra SCSS, is that correct?

If so, could you guide me on how to locate the file path for the image I uploaded to the Media Manager?

I’ve reviewed the documentation, which explains how to change the app's colors, but I didn’t see anything regarding the background. Thanks in advance for your help!
aantsypau
Posts: 26
Joined: Wed May 24, 2023 7:57 am

Re: Screen Background Image for Light and Dark Modes

You can setup background image from component properties panel, for that you need to select the Content component and specify the value of Bg Image property

In case when it is needed to apply background image for all screen and adjust image accord to selected theme you need to add the css code like this

ion-content {
--background: none;
background-image: url(../assets/images/map-world.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

Into Extra SCSS section of every theme
Attachments
unnamed (25).png
unnamed (25).png (111.11 KiB) Viewed 360 times
unnamed (24).png
unnamed (24).png (246.44 KiB) Viewed 360 times

Return to “Issues”