androidcssmobilenativescript

Nativescript CSS Text In front of image

How to create CSS to make position label in front of image. Like z-index on HTML. I was use background-image, but not working. I was create with this code : 

<grid-layout rows="220, auto" columns="*, *, *" id="cardReport" style="background-image: url('{{ foto }}');">
    <image src="{{ foto }}" stretch="aspectFill" colSpan="3" row="0" tap="goReport"/>
    <label text="{{ namapaket }}" class="info" textWrap="true" row="1" colSpan="1"
           horizontalAlignment="center"/>
</grid-layout>

thanks for your help.

Solution

  • Put the label on the same row as the image.

    <grid-layout rows="220, auto" columns="*, *, *" id="cardReport" style="background-image: url('{{ foto }}');">
<image src="{{ foto }}" stretch="aspectFill" colSpan="3" row="0" tap="goReport"/>
<label text="{{ namapaket }}" class="info" textWrap="true" row="0" colSpan="1"
       horizontalAlignment="center"/>