How to create a card an ionic card with background image and overlapping text on the image

Issue

I am trying to use the background image card example from the Ionic Docs https://ionicframework.com/docs/components/#card-background but during implementation, the text doesnt overlap the background image.

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

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

  <ion-card>
    <img src="img/card-amsterdam.png"/>
    <div class="card-title">Amsterdam</div>
    <div class="card-subtitle">64 Listings</div>
  </ion-card>

</ion-content>


page-home {

    .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;
        }

      }
    }

What could be the issue?

Solution

Your code not seems to have a problem, however try to change your code from this

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

to this

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

Also check your image path whether you specifying it correctly or not.

Answered By - Raj