title: How to create a card an ionic card with background image and overlapping text on the image
body: <p>I am trying to use the background image card example from the Ionic Docs <a href="https://ionicframework.com/docs/components/#card-background" rel="nofollow noreferrer">https://ionicframework.com/docs/components/#card-background</a> but during implementation, the text doesnt overlap the background image.</p>
  
  <pre><code>&lt;ion-content class="card-background-page"&gt;
  
    &lt;ion-card div class="card"&gt;
      &lt;img src="assets/img/rundmc-live.png"/&gt;
      &lt;div class="card-title"&gt;São Paulo&lt;/div&gt;
      &lt;div class="card-subtitle"&gt;41 Listings&lt;/div&gt;
    &lt;/ion-card&gt;
  
    &lt;ion-card&gt;
      &lt;img src="img/card-amsterdam.png"/&gt;
      &lt;div class="card-title"&gt;Amsterdam&lt;/div&gt;
      &lt;div class="card-subtitle"&gt;64 Listings&lt;/div&gt;
    &lt;/ion-card&gt;
  
  &lt;/ion-content&gt;
  
  
  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;
          }
  
        }
      }
  </code></pre>
  
  <p>What could be the issue?</p>