J'ai essayé dans global.scss comme

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

Mais cela ne rend pas l'image. essayé le chemin comme ./assets/images/cover.jpg également.

Si je mets la même image que la balise img sur la page qui apparaît, excluant la possibilité d'une image invalide.

J'ai aussi essayé de mettre le fichier homeage.scss comme

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

Et en utilisant class = "myview" dans home.html pas de chance

23
Vik 20 nov. 2018 à 22:14

5 réponses

Meilleure réponse

Vous pouvez utiliser la variable CSS --background pour changer l'arrière-plan du contenu ionique.

Exemple:

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

Mettez cela dans vos composants, pages ou scss global.

Pour référence, voir: https://beta.ionicframework.com/docs/api / content # css-custom-properties

63
Gary Großgarten 20 nov. 2018 à 20:57

J'ai résolu le problème en procédant comme suit:

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

Cela désactivera l'arrière-plan, puis définira le bon.

16
GianPierre Gálvez 27 mars 2019 à 13:10

J'ai rencontré la situation similaire, avoir la propriété css d'arrière-plan ionique conduit à des problèmes de scintillement sur IOS

Essayez ce qui suit si vous avez rencontré un problème de scintillement

:host {
  ion-content {
    --background:none;
    background:url(''../../assets/images/cover.jpg');
    background-size: cover;
    background-position: center center;
  }
}

Pour toute personne ayant des problèmes de clavier (redimensionnement de l'arrière-plan sur l'affichage du clavier) installez le plugin Keyboard

https://ionicframework.com/docs/native/keyboard/

Et ajoutez le code suivant sur votre config.json

<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />

Remarque: cela peut masquer l'élément sous le clavier lorsqu'il est affiché (j'ai testé uniquement sur iOS)

5
kishorekumaru 27 févr. 2019 à 03:45

J'ai essayé la réponse de @rchau, mais cela n'a pas fonctionné dans mon cas. Au lieu de cela, j'ai mis ce code dans mon projet et il a fait la bonne chose:

ion-content{
    --background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}
0
Heikki 18 mars 2019 à 12:46

04-05-2019

C'est la solution de travail pour moi.

ion-content {
    --background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}
0
Sampath 3 mai 2019 à 20:14