Tips

Fullscreen background image

Although it might not be a common thing to have a page with only a background image, it can be easily done with NativeScript. I used it as a "thank you" page after completing a lineair process.

See the code snippets below for the steps involved.

Page template


<ScrollView class="fullscreen">
</ScrollView>

CSS


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

Angular


import { Page } from "ui/page";

constructor(private page: Page) {
    this.page.actionBarHidden = true;
}