Giving StackLayout a background image with js


#1

Hi,

I want to give my stacklayout a background image. But nowhere I can’t find a guide that explains how to do this. Maybe some of you can help me.

<StackLayout class="sidedrawer-header" verticalAlignment="bottom" orientation="horizontal">
                        <StackLayout id="circle" horizontalAlignment="left" verticalAlignment="center" oriantation="horizontal"> -->
                             <label id="label-circle" text="&#xf007;" verticalAlignment="center" horizontalAlignment="center"></label> -->
                       </StackLayout> 
                       <label text="{{name}}" id="person" verticalAlignment="center" horizontalAlignment="right"></label>
                </StackLayout> 

This is my xml code.

Already much thanks for helping.


#2

backgroundImage is an attribute of View which is base class of any layout / container. You can simply assign a remote / local image.

Or you can do the same with CSS using background-image attribute.


#3

Here you go for examples in docs.

HTML

<!-- Load backgroundImage from url using CSS-->
<Label text="Image loaded from URL using CSS" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<StackLayout id="layoutBackgroundImageURL"></StackLayout>
<!-- Load backgroundImage from app/images folder using CSS-->
<Label text="Image loaded from custom folder using CSS" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<StackLayout id="layoutBackgroundImageFromFolder"></StackLayout>
<!-- Load backgroundImage from App_Resources using CSS -->
<Label text="Image loaded from resources using CSS" backgroundRepeat="no-repeat"
    textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<StackLayout id="layoutBackgroundImageFromRes"></StackLayout>

CSS

#layoutBackgroundImageURL{
    background-image: url("https://docs.nativescript.org/img/cli-getting-started/angular/chapter0/NativeScript_logo.png");
    background-repeat: no-repeat;
    height: 120;
    margin: 15;
}

#layoutBackgroundImageFromFolder{
    background-image: url("~/images/logo.png");
    background-repeat: no-repeat;
    height: 60;
    margin: 15;
}


#layoutBackgroundImageFromRes{
    background-image: url("res://logo_white_bg");
    background-repeat: no-repeat;
    height: 100;
    margin: 15;
}

#4

Hi thank you for your first response but i was wondering how do I change the background image in js?


#5

Get the StackLayout reference and just assign new image via backgroundImage property, as simple as that.

Incase if you are not sure how to get reference of your StackLayout / assigning new value I recommend you to go through the startup tutorial.

Quick snippet

page.getViewById("stackLayoutId").backgroundImage = "Your Image";

#6

Thank you this is very helpful. But what is the best way to style the background image? Should I use CSS or can I do it in js?


#7

Most times we do it through CSS to keep code clean and isolated.

But if you have requirements like changing it dynamically or at particular time when some condition is met you can do it through JS or even bind it with your data model. It’s totally up to your use case.


#8

Thank you for your help!