css - repita - Imagen de fondo de pantalla completa iónica

imagen de fondo html pantalla completa codigo

Question

Soy nuevo en el marco de Ionic y estoy intentando iniciar la aplicación con una imagen de fondo de pantalla completa como esta:

Logré eliminar la barra de estado que se mostró en el tutorial. ¿Pero cómo agrego una imagen de pantalla completa? Cuando agregué esto al style.css no reaccionó:

html, body{
  background-image: black;
}

Answer 1

Asegúrate de que el inicio de la ruta de tu imagen tenga "../"; esto indicará la ruta de la imagen correcta en tu carpeta de recursos una vez que la aplicación esté diseñada para un dispositivo. Usar el método del panel solo parecía causar problemas, esta fue la mejor solución para mí cuando la imagen aparecía cuando se publicaba, pero no en mi dispositivo 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;

}

Answer 2

Dado que las estructuras de carpetas han cambiado recientemente en Ionic 2 beta ...

Su imagen debe estar en una ruta similar a www/img/backgrounds/lake.png , y el CSS que lo acompaña debe leer:

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

Nota: necesitas saltar 2 directorios, ../../

Answer 3

En tu css, prueba:

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

    [add any more properties here]

  }

Esto establecerá el fondo para el área de contenido completo.

Answer 4

Muy similar a la respuesta de Helmut, que funcionó con ''servicio iónico'' pero me dio un fondo blanco cuando empecé a Android (4.2.2 en un Nexus 7 en mi caso).

El selector de clase del panel es correcto si desea que el fondo se muestre en pantalla completa, sin embargo, Android parece que el fondo se vuelve blanco si configuro el valor de "fondo". Usando "imagen de fondo" pon las cosas bien.

Encontré que lo siguiente funcionaba en Android y en Chrome (mientras realizaba pruebas web).

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

Answer 5

en

ion-view class="pane"

todo lo que se renderiza ... no lo probé pero creo que puedes manejarlo con

.pane { background: url(image) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }