How to customize the background image of an Ionic 5 app?

Question

I'm trying to set an image takken from media manager in appery in my Ionic App, using Ionic 5... but the image doesn't show. I'm using following code in the SCSS section:

ion-content

{
--background: no-repeat center/cover url('/files/images/background.png');
}

my implementation

Please help.

Answer 1

There are a few issues with your SCSS code. So your code should be the following:

ion-content{
    --background: 
url('../assets/images/a_2020_in_front_of_the_orchestra.jpg') no-repeat 
center/cover;
}

ion-content.ion-color-secondary{
        --ion-color-base: none !important;
}

1. Please correct the URL to the image.
2. Add the selector "ion-content.ion-color-secondary" with the property "--ion-color-base".