Nativescript Full Screen Background

Question

I want to create an application in Nativescript with a full-screen image on the page. I have to use background-image: url('~/images/background.jpg'); . But how to do it in full screen mode. Thank you for your help.

Answer 1

To do this, you need to use the CSS properties supported by NativeScript.

I used the following CSS on a background-image attached to a <Page> view and it works fine.

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

Answer 2

If you want Page have a full-screen background, add your images to /App_Resources and do this in your component:

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

Update: You can add CSS to enable full screen mode.

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

Note. Assign this CSS class to your Page .

Answer 3

if you use nativeScipt with Angular you can use:

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

 <!-- in your .html: --> <ScrollView class="my-class"> 

Answer 4

This does not work with animated GIFs. My style:

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

The GIF is shown, centered and enlarged, so big but static: the animation does not move.

Answer 5

This worked for me:

 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'; }