Nativescript background-image fullscreen

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

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">

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.