title: How to mask an html element using an image
body: <p>I'm making a game. In the bottom left will be the players health. I want to represent this health by showing an outline of a human body where the health value is a gradient image that is filled in and when they drop health that gradient image will be shifted downward to let the background show through.</p>
  
  <p>I have the following code but all I see is the gradient image in the div and it's not masked by the mask which is a black and white image. What am I doing wrong with this? I'm using chrome and that's the only browser I need this to support.</p>
  
  <pre><code>html, body {
          height: 100%;
      }
  
      #footer{
          position: fixed;
          left: 10px;
          bottom: 10px;
      }
  
   &lt;body style="background-color: gray;"&gt;
      &lt;div id="footer" style="width: 15%; height: 25vw; background-color: red; "&gt;
          &lt;img src="http://www.adamdorman.com/wallpaper/gradient_1600x1200.jpg" style="width: 100%; height: 100%; mask: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Layer-masks-mask.jpg);" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/bwh3couo/" rel="nofollow">https://jsfiddle.net/bwh3couo/</a></p>