<div></div>

div{
  /* chrome still requires prefixed property */
  -webkit-mask-image: url("https://i.giphy.com/media/OzXfHi0efbEeA/giphy.webp");
  mask-image: url("https://i.giphy.com/media/OzXfHi0efbEeA/giphy.webp");
  
   /* chrome requires you set a mask size, firefox does not */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  
  mask-repeat: no-repeat;
  
  
  /* need to set a background */
  background-color:green;
  
  width: 20rem;
  height: 20rem;
  
  margin: 0 auto;
}