Nativescript background-image fullscreen

Question

I want to create app in Nativescript with fullscreen image on page. I have to use background-image: url('~/images/background.jpg');. But how to make it full screen. Thanks for your help

Answer 1

If you want the Page to have a fullscreen image 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 enforce fullscreen.

.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 2

This does not work with animated gif. 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 great, but static: the animation does not moves.

Answer 3

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

Answer 4

if you're using 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 5

You need to use the NativeScript supported CSS properties to achieve this.

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

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