Image d'arrière-plan ionique plein écran

je suis nouveau dans le cadre ionique et j'essaie de démarrer l'application avec une image d'arrière-plan plein écran comme ceci: enter image description here

j'ai réussi à supprimer la barre de statut qui était affichée dans le tutoriel. Mais comment ajouter une image plein écran? Quand j'ai ajouté ça au style.css il n'a pas de réagir:

html, body{
  background-image: black;
}
17
demandé sur Sinan Samet 2014-05-28 12:52:25

5 réponses

Dans ton css, essayez:

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

    [add any more properties here]

  }

cela définira l'arrière-plan pour l'ensemble de la zone de contenu.

30
répondu Mr MT 2014-06-01 12:20:03 

ion-view class="pane"

tout est rendu ... je n'ai pas essayer mais je pense que vous pouvez gérer cela avec


    .pane {
        background: url(image) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }
15
répondu Helmut 2014-05-28 13:00:57

assurez-vous que le début de votre chemin d'image a "../ "ceci le pointera vers le chemin d'image correct dans votre dossier ressource une fois que l'application est construite pour un périphérique. L'utilisation de la méthode de pane seulement semblait causer des problèmes ce fut la meilleure solution pour moi quand l'image apparaissait lorsque servi mais pas sur mon appareil android.

.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
répondu Aidan Doherty 2015-05-07 10:24:53

très similaire à la réponse DE Helmut, qui a travaillé en utilisant "ionic serve" mais m'a donné un fond blanc quand j'ai poussé à Android (4.2.2 sur un Nexus 7 dans mon cas).

le sélecteur de classe de volet est correct si vous voulez faire le plein écran de fond, cependant android juste semblé faire le blanc de fond si je mets la valeur" background " à tous. L'utilisation de "background-image" met les choses en ordre.

j'ai trouvé ce qui suit a fonctionné sur Android, et dans Chrome (alors que web test.)

.pane {
    background-image: url(image); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
6
répondu JDawgg 2014-12-03 00:09:48

depuis que la structure des dossiers a changé récemment dans Ionic 2 beta...

votre image devrait être à un chemin similaire à www/img/backgrounds/lake.png, et l'accompagnement CSS devrait 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
répondu Ryan Loggerythm 2016-04-08 00:31:45