Nativescript background-image fullscreen - nativescript

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

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

Answer 2

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 3

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 4

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 5

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 6

I had a very large image, where the background-size: cover; did not show the image well neither in landscape ( squeezed and narrow ) /portrait ( goes out of the page )
Eventually what worked best for me was to add an Image element, and set it as background
<Image src="~/assets/images/background.jpg" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>
<AbsoluteLayout>
<Image src="~/assets/images/background.jpg" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>
<StackLayout top="0" left="0" width="100%" height="100%">
... usual content here
</StackLayout>
</AbsoluteLayout>