ionic 4 ion-content background-image not showing on device

Question

I'm trying to add a background image in my ion-content here is my current code:

ion-content{
    --background: none;
    background-image: url('/assets/images/home-background.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

I also tried the following but same thing happened.

ion-content{
    --background: url('/assets/images/home-background.png')  no-repeat center center / cover;
    text-align: center;
}

It is working in browser but when I'm doing ionic cordova run android, the background image is not showing. I also tried to change the url to url('../assets/images/home-background.png'), url('./assets/images/home-background.png') and url('../images/home-background.png') but it's giving me error.

I tried to check it and debug it and maybe this can help, I clicked the url and it brings me to the resources which shows me the image

In this second image, I saw the home-background.png

Answer 1

You can try to change your image url as shown below

ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}

this worked for me.

Answer 2

didn't have the chance to solve this problem using the ionic-content, so what I did is to change the ionic-content to div, and it solve my problem. Working in web and android device.

Answer 3

background-image: url('..assets/img/home-background.png');

if u have set path just type ../ or ./ automatically path will suggestion

Answer 4

Try changing the path keep images in main www/assets/img folder and then set

background-image: url('assets/img/home-background.png');

Answer 5

Open scss file:

ion-content {
    background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
    background-size: 100%; 
}