ionic2 - ion-card with background image

Question

I am trying to understand how this ion-card background image works. They have their html like this:

<ion-content class="card-background-page">

  <ion-card>
    <img src="img/card-saopaolo.png"/>
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
  </ion-card>
...

Then just setup the sass:

.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

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

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

}

There isn't any z-index, and how can the <img src="img/card-saopaolo.png"/> magically become background? Is it something that handle by sass? or something else that I never learn before?

Answer 1

Rock Chill Rock Rock Chill Trance Effect

1 Songs

.headerWelcomeTile {
  margin: 0px 0px 0px 0px !important;
  width: 100% !important;
  height: 35%;
  position: relative;
  text-align: center;
}

.headerWelcomeTileSub {
  margin: 30px 35px 0px 20px;
  background: black !important;
}

.headerSubDiv {
  position: absolute;
  margin: 0px 0px 0px 15px !important;
  height: 70%;
  position: relative;
  text-align: center;
  width: 75%;
}

<ion-card class="cardBackColor card card-md headerWelcomeTile">
    <div style="height: 20%;">
        <img class="imag-height" src="https://trunkitmusic.com/assets/music/RM/PRG/The%20Family%20Cheese/The%20Family%20Cheese%20LP/album.jpg">
    </div>
    <ion-card-content class="cardSubBackColor card-content card-content-md headerSubDiv " text-wrap="">
        <ion-row class="row">
            <ion-col class="col" col-4="">
                <img style="height: 80px;width: 80px;" src="https://trunkitmusic.com/assets/music/PP/IND/Trance Effect/artist.jpg">
            </ion-col>
            <ion-col class="col">
                <ion-segment class="segment segment-ios ng-untouched ng-pristine ng-valid segment-md">
                    <ion-segment-button aria-pressed="true" class="segment-button segment-button" role="button" tappable="" value="Paid">
                        Rock
                        <div class="button-effect"></div>
                        <div class="button-effect"></div>
                    </ion-segment-button>
                    <ion-segment-button aria-pressed="false" class="segment-button segment-button" role="button" tappable="" value="Free">
                        Chill Rock
                        <div class="button-effect"></div>
                        <div class="button-effect"></div>
                    </ion-segment-button>
                    <ion-segment-button aria-pressed="false" class="segment-button segment-button" role="button" tappable="" value="Top">
                        Rock Chill
                        <div class="button-effect"></div>
                        <div class="button-effect"></div>
                    </ion-segment-button>
                </ion-segment>
                <div class="artisName">
                    <img src="assets/img/user-music.png" style="width:10px;">
                    <p class="small-text white uperSpaceArtisName">Trance Effect</p>
                </div>
                <p class="very-small-text lightGrey">1 Songs</p>
            </ion-col>
        </ion-row>
        <!--template bindings={}-->
    </ion-card-content>
</ion-card>

Answer 2

The card-title and card-subtitle are simply placed on top of image with position: absolute and there is no need for z-index.