The background image of ion-content only appears in the browser, it does not appear in the Device in Ionic 4

Ionic Framework
1

The background image of ion-content only appears in the browser, it does not appear in the Device in Ionic 4.

scss:

ion-content {
  --background: #fff url("../../../assets/imgs/loginbg.jpg") no-repeat center center / cover;
}

html:

<ion-content padding>
</ion-content>

In broswer:

image

In Android device:

image
image.png400×688 19.7 KB

bug?

2

Please try this code:

ion-content {
 --background: #fff url("/assets/imgs/loginbg.jpg") no-repeat center center / cover;
}
1 Like
3

Thank you. But it does not work, he had tried. Note that the image address is correct, so much so that it is displayed in the Browser.

4

It’s easier if you create another div, just to hold your background.
I have tried to insert a background image inside the ion-content but it didn’t work too…

<ion-content>
  <div class="background">
     ... resto do seu código
  </div>
<ion-content>

and the css for background

.background{
   width: 100%;
   min-height: 100%;
   background-image: url('url da imagem');
   background-size: cover;
}