css - ionic 4: schimbarea fundalului ion-content nu funcționează

Am încercat în global.scss astfel

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

dar acest lucru nu afișează imaginea. Am încercat și calea ./assets/images/cover.jpg.

dacă pun aceeași imagine ca etichetă img pe pagină, asta exclude posibilitatea unei imagini invalide.

Am încercat, de asemenea, să pun în homeage.scss ca

.myview {
    background-image: url('../../assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}

și folosind class="myview" în home.html, fără noroc

Răspuns #1

Poți folosi variabila CSS --background pentru a schimba fundalul ion-content.

Exemplu :

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

Pune asta în componentele, paginile sau scss-ul global.

Pentru referință vezi: https://beta.ionicframework.com/docs/api/content#css-custom-properties

Răspunsul #2

Am rezolvat problema urmând pașii următori:

ion-content {
    --background: none;
    background-image: url('/assets/imgs/page_bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Acest lucru va dezactiva fundalul și apoi va seta pe cel corect.