web-dev-qa-db-fra.com

Nativescript background-image plein écran

Je veux créer une application dans Nativescript avec une image plein écran à la page. Je dois utiliser background-image: url('~/images/background.jpg');. Mais comment le faire en plein écran. Merci de votre aide

nativescript
11
Pamungkas Jayuda

Vous devez utiliser le NativeScript pris en charge propriétés CSS pour y parvenir.

J'ai utilisé le CSS suivant sur une image d'arrière-plan attachée au <Page> voir avant et ça marche bien.

.coverImage {
    background-image: url('~/images/kiss.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
26
Brad Martin

Si vous souhaitez que Page ait un arrière-plan plein écran, ajoutez vos images à /App_Resources et faites ceci dans votre composant:

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

Mise à jour: vous pouvez ajouter du CSS pour appliquer le plein écran.

.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 */
}

Remarque: assignez cette classe CSS à votre Page.

8
Onur Yıldırım

si vous utilisez nativeScipt avec Angular, vous pouvez utiliser:

/*In your .css: */

.my-class {
    background-image: url("res://image-name.png") no-repeat;
}
<!-- in your .html: -->

<ScrollView class="my-class">
4
gandhi Mena

Cela a fonctionné pour moi:

constructor(private page: Page) { }

ngOnInit() {
  this.page.actionBarHidden=true;`
  this.page.backgroundImage = 'res://gold_bg';
  this.page.style.backgroundSize='cover';
  this.page.style.backgroundRepeat='no-repeat';
}
0
Per Høyer

Cela ne fonctionne pas avec le gif animé. Mon style:

.page{
    background-image: url("~/assets/images/animated.gif") black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Le gif est montré, centré et agrandi, tellement génial, mais statique: l'animation ne bouge pas.

0
hgc2002