web-dev-qa-db-fra.com

Ionic image d'arrière-plan plein écran

Je suis nouveau dans le framework Ionic et j'essaie de démarrer l'application avec une image d'arrière-plan en plein écran comme celle-ci: enter image description here

J'ai réussi à supprimer la barre d'état affichée dans le didacticiel. Mais comment ajouter une image plein écran? Quand j'ai ajouté ceci au style.css, il n'a pas réagi:

html, body{
  background-image: black;
}
cssionic-frameworkion
19
Sinan Samet

Dans votre CSS, essayez:

  .scroll-content {
    background: url(image) [add image position info here];

    [add any more properties here]

  }

Cela définira l'arrière-plan de la zone de contenu complet.

30
Mr MT

dans

ion-view class = "volet"

tout est rendu ... je ne l'ai pas essayé mais je pense que vous pouvez gérer cela avec

 
 .pane {
 fond: url (image) centre sans répétition centre fixe; 
 -webkit-background-size: cover; 
 -moz-background-size: cover; 
 background-size: cover; 
}
15
Helmut

Assurez-vous que le début de votre chemin d'image a "../" cela le dirigera vers le chemin d'image correct dans votre dossier de ressources une fois que l'application est créée pour un appareil. L'utilisation de la méthode du volet ne semblait causer des problèmes que c'était la meilleure solution pour moi lorsque l'image apparaissait lorsqu'elle était diffusée, mais pas sur mon Android appareil.

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}
9
Aidan Doherty

Très similaire à la réponse d'Helmut, qui fonctionnait en utilisant le "service ionique" mais m'a donné un fond blanc lorsque j'ai poussé vers Android (4.2.2 sur un Nexus 7 dans mon cas).

Le sélecteur de classe de volet est correct si vous souhaitez rendre l'arrière-plan plein écran, cependant Android semblait simplement rendre l'arrière-plan blanc si je définissais la valeur "background" du tout. Utiliser "background-image" mettre les choses en ordre.

J'ai trouvé que ce qui suit fonctionnait sur Android et dans Chrome (lors des tests Web).

.pane {
    background-image: url(image); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
6
JDawgg

Depuis les structures de dossiers ont changé récemment dans Ionic 2 beta ...

Votre image doit se trouver sur un chemin similaire à www/img/backgrounds/lake.png, et le CSS d'accompagnement doit se lire:

.myClassName {
    background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Remarque: vous devez sauter 2 répertoires, ../../

3
Ryan Loggerythm

Ionic 4 Changer la couleur d'arrière-plan du contenu ionique

enter image description here

Expliqué ici ( Lien source 

ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;  
}
2
Code Spy