title: Z-index not working with background image
body: <p>For the following CSS -</p>
  
  <pre><code>.competition .banner .image {
      background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
      display: inline-block;
      position: relative;
  }
  </code></pre>
  
  <p>And HTML -</p>
  
  <pre><code>    &lt;div class="banner"&gt;
          &lt;span class='image'&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="info"&gt;
          &lt;div class="main-info"&gt;
              {{ competition.description }}
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I cannot figure how to put the <code>description</code> on top of the background-image. I've tried setting the Z-index for all the <code>div</code>'s, <code>span</code>'s, etc. but nothing seems to work. How would I put the text on top of the background image here?</p>