NativeScript/NativeScript Angular - How to set a background image for the page?

Question

I'm trying to create a background image but I can't seem to being able to do so.. I looked at this question:

Nativescript background-image fullscreen

But without any luck. It doesn't show enough of the markup and also the OP there doesn't seem to use nativescript-angular because when you use <Page></Page> as suggested you get an error.

And this issue says that Page shouldn't be used with angular, and I'm positive I've read the same thing in the docs.

I use this css:

.login-page {
  width: 100%;
  height: 100%;
  padding: 40px 60px;
  background-image: ~/assets/img/login.jpg;
  background-position: 50% 50%;
  background-size: cover;
  background-color: blue;
}

With this template:

<StackLayout class="login-page text-center" orientation="vertical" [formGroup]="loginForm">
  <StackLayout class="input-field m-b-20">
    <TextField class="input input-rounded" formControlName="email" hint="Email"></TextField>
  </StackLayout>
  <StackLayout class="input-field">
    <TextField class="input input-rounded" formControlName="password" hint="Password" secure="true"></TextField>
  </StackLayout>
</StackLayout>

The image is at app/assets/img/login.jpg. Any ideas why this isn't working?

Your code should work as expected or at least the exact same scenario is working on my side - here is the test project github.com/NickIliev/NativeScript-Issues-2017/tree/master/… — Nick Iliev
You cannot use Page directly, but you can programmatically. In ngOnInit for the component, you can this.page.backgroundImage = "res://login" — jalal

Tiago Mendes Tiago Mendes · Accepted Answer · 2017-04-21T21:54:32

At Component Login.ts:

import { Page } from "ui/page";

export class LoginComponent {
  constructor(private page:Page) {
    page.backgroundImage = '~/images/login.jpg';
  }   
}

Must create a folder at app root named images like the Nativescript docs says.

NativeScript/NativeScript Angular - How to set a background image for the page?

1 Answers