title: ionic2 - ion-card with background image
body: <p>I am trying to understand how <a href="http://ionicframework.com/docs/v2/components/#card-background" rel="nofollow noreferrer">this ion-card background image</a> works. They have their <code>html</code> like this:</p>
  
  <pre><code>&lt;ion-content class="card-background-page"&gt;
  
    &lt;ion-card&gt;
      &lt;img src="img/card-saopaolo.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;
  ...
  </code></pre>
  
  <p>Then just setup the <code>sass</code>:</p>
  
  <pre><code>.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>There isn't any <code>z-index</code>, and how can the <code>&lt;img src="img/card-saopaolo.png"/&gt;</code> magically become background? Is it something that handle by <code>sass</code>? or something else that I never learn before?</p>