Background Image Not Showing On NativeScript Page - nativescript

Question

I am trying to display a background image on my login page, it is not showing.
I have tried adding the class to the page and my layout. Neither is working.
Is there something in my code that is preventing this for some reason?
<Page loaded="pageLoaded" class="page bgImage" actionBarHidden="true" xmlns="http://www.nativescript.org/tns.xsd">
<FlexboxLayout class="page">
<GridLayout rows="auto, auto, auto">
<StackLayout class="form ">
<Image class="logo" src="~/images/johnevolve.png" />
<Label class="header" text="Health Conscious" />
<StackLayout class="input-field">
<Label text="Username" />
<TextField class="input" text="{{ email }}" hint="Email"
keyboardType="email" autocorrect="false"
autocapitalizationType="none" returnKeyType="next" />
<Label class="hr-light" />
</StackLayout>
<StackLayout class="input-field">
<Label text="Password" />
<TextField id="password" class="input" text="{{ password }}"
hint="Password" secure="true" returnKeyType="{{ isLoggingIn ? 'done' : 'next' }}" />
<Label class="hr-light" />
</StackLayout>
<StackLayout class="input-field" visibility="{{ !isLoggingIn ? 'visible' : 'collapse' }}">
<TextField id="confirmPassword" class="input" text="{{ confirmPassword }}"
hint="Confirm password" secure="true" returnKeyType="done" />
<Label class="hr-light" />
</StackLayout>
<Button text="{{ isLoggingIn ? 'Log In' : 'Sign Up' }}" tap="{{ submit }}"
class="btn btn-primary m-t-20" />
<Label visibility="{{ isLoggingIn ? 'visible' : 'collapse' }}"
text="Forgot your password?" class="login-label" tap="{{ forgotPassword }}" />
</StackLayout>
</GridLayout>
<Label class="login-label sign-up-label" tap="{{ toggleForm }}">
<FormattedString>
<Span text="{{ isLoggingIn ? 'Don’t have an account? ' : 'Back to Login' }}" />
<Span text="{{ isLoggingIn ? 'Sign up' : '' }}" class="bold" />
</FormattedString>
</Label>
</FlexboxLayout>
</Page>
and my css:
.bgImage {
background-image: url("~/images/1-login.png");
}
Edit: Here is the page css rule in case you need that:
.page {
align-items: center;
flex-direction: column;
}
Does anyone know what's going wrong here?
Thank you.
Image In Question:

Answer 1

If this is NativeScript 5.x and you are using HMR/Webpack; the issue is most likely WebPack caused. I have a blog article about this on how to disable HMR mode and re-use Legacy mode.
In a nutshell you need to re-enable Legacy mode.
http://fluentreports.com/blog/?p=935
Please note; this is only relevent to NativeScript 5.x; NativeScript 6 (coming out shortly) will probably not let you re-enable legacy mode.
If you find legacy mode does actually fix your issue; please report this issue to the https://github.com/nativescript/NativeScript-Dev-Webpack repo so it can be looked at.

Answer 2

There was the problem with your FlexboxLayout . It was taking the 100% height and overlapping the background image with it's content.
You can also try with giving background Image to your FlexboxLayout.
<FlexboxLayout class="page bgImage">
and in app.css
.bgImage{
/* background-color: green; */
background-image: url("~/images/1-login.png");
background-repeat: no-repeat;
background-size: cover
}
I have created a playground for you here.