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.