Nativescript: Hi, Can i know how the background image is not repeated in NS, and how to fit the background image to the screen

Created on 17 May 2016  路  5Comments  路  Source: NativeScript/NativeScript

question

Most helpful comment

You can do so:
this.page.backgroundImage = "res://bg_login_plt4ma";
this.page.css = 'page {background-size: cover}';

All 5 comments

Hi @karumurikiran

Background image can be set and styled in multiple ways in NativeScript for example you can use CSS-properties to control your background image repeat, size and other options.
_For example:_

.my-class {
    background-image: url("res://bg_inner.jpg");
    background-repeat: repeat;
}

For more information about supported CSS-properties including ones for background image refer to https://docs.nativescript.org/ui/styling

note: Please keep in mind that the issue system is for tracking possible issues and problems and more common questions and scenarios can be answered faster by the community in the link below http://stackoverflow.com/questions/tagged/nativescript

Thanks for the reply, can we give height and width to the background image IN NS

@karumurikiran

Yes you can set again with CSS-properties like width, height, max-width and max-height
which can be set with device-independent values , absolute values or percentages.
You can also use scaleX and scaleY to control your image appearance - a nice example with parallax efffect achived is shown in our sample app Groceries

You can do so:
this.page.backgroundImage = "res://bg_login_plt4ma";
this.page.css = 'page {background-size: cover}';

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings