Nativescript background-image fullscreen

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

Hygrostat

Please, show us what you have tried. Provide us with a minimal, complete and verifiable example MVCE – Skurnik

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

Middendorf

Yes, you need url() around the img path. – Healy

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.

Mallen

This doesn't scale it to fullscreen though unfortunatley. – Salvation

It does work with CSS but unfortunately if I use any CSS the background image gets pushed up when the soft keyboard comes into view. – Salvation

@BenMorris Try background-attachment: fixed – Hulk

@BenMorris seems {N} does not support background-attachment. So background-position: center top should fix it. – Hulk

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

Demography

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.

Nanice

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

Mcbroom

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>

Rockies