Button on the background image area


#1

Hi.

Trying to place the button over the background image.
Having following code in home.html:

    <ion-content class="home">
         <ion-card>
             <img src="build/img/background.jpg"/>        
             <div class="card-title">Hello World!</div>
             <div class="card-subtitle">Hello {{name}}</div>
             <button ion-button color="danger">RELAX</button>
         </ion-card>
     </ion-content>

in home.scss:

.home {
	ion-card {
		text-align: left;
	}

	.card-title {
		position: absolute;
		top:25%;
		font-size: 2.0em;
		width: 100%;
		font-weight: bold;
		color: #fff;
	}

	.card-subtitle {
		font-size: 1.5em;
		position: absolute;
		top: 36%;
		width: 100%;
		color: #616FD4;
	}
}

in home.ts:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    public name;

  constructor(public navCtrl: NavController) {
    this.name = "Paul";
  }

}

Still button shows up bellow the background.jpg.
Tried to find out what changes should be done to succeed in my mission, but no use.
Please, help me.