Nativescript background-image fullscreen

Question

Voglio creare un'app in Nativescript con l'immagine a schermo intero sulla pagina. Devo usare background-image: url('~/images/background.jpg');. Ma come renderlo a schermo intero. Grazie per l'aiuto

Answer 1

Per raggiungere questo obiettivo è necessario utilizzare il codice nativo supportato CSS properties.

Ho utilizzato il seguente CSS su un'immagine di sfondo collegata alla vista <Page> e funziona correttamente.

.coverImage { background-image: ~/images/kiss.jpg; background-repeat: no-repeat; background-position: center; background-size: cover; }

Answer 2

se si sta utilizzando nativeScipt con angolare, è possibile utilizzare:

/*In your .css: */ 
 

 
.my-class { 
 
    background-image: url("res://image-name.png"); 
 
    background-repeat: no-repeat; 
 
    
 
}

<!-- in your .html: --> 
 

 
<ScrollView class="my-class">

Answer 3

Se si desidera che il Page di avere uno sfondo di immagini a schermo intero, aggiungere le immagini a /App_Resources e farlo nel componente:

export class MyComponent implements OnInit { 
    constructor(private page:Page) {} 
    ngOnInit() { 
     this.page.actionBarHidden = true; 
     this.page.backgroundImage = "res://bg-image"; 
    } 
} 

Aggiornamento: è possibile aggiungere CSS per applicare lo schermo intero.

.page { 
    /* background-image: url("res://bg-image") */ 
    background-size: cover; 
    background-repeat: no-repeat; 
    /* background-attachment: fixed; */ /* not supported in {N} yet */ 
    background-position: center top; /* instead set ypos to top to avoid scroll-up */ 
} 

Nota: assegnare questa classe CSS al vostro Page.