title: How do I use an mdl badge to overlap an image?
body: <p>I am creating a website but have come across a problem. I want to create a sort of expanding gallery that expands when you hover over a cover image. I want the cover image to have a material design lite badge that says the amount of images in that gallery. My problem is that I cannot find a way for the badge to show up on an image. For some reason, it just doesn't work. My current workaround is this:
  HTML:<code>&lt;main class="mdl-layout__content"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div id="gall1" class="material-icons mdl-badge mdl-badge--overlap" data-badge="2"&gt;&lt;/div&gt;
    &lt;/main&gt;</code></p>
  
  <p>CSS:<code>#gall1{
      background-image: url('20152016.png') center / cover;
  }</code></p>
  
  <p>But it still is not working. Does anyone have any thoughts, solutions, or ideas as to why this is not working?</p>
  
  <p>Thanks.</p>