title: How to put images in particle explosions using CSS
body: <p>I need to put cookies doing a particle explosion and I need to replace the particles with an image, I already tried to do background-image but doesn't work.</p>
  <pre><code>$d: 20px;
  
  html { overflow: hidden; background: #222; }
  
  .particle {
      position: absolute;
      width: $d; height: $d;
      animation: shoot 3s ease-out infinite;
      animation-name: shoot, fade;
      border-radius: 50px;
      
      @for $i from 0 to 50 {
          $t: (1 + .01*random(50))*1s;
          
          &amp;:nth-child(#{$i + 1}) {
              transform: translate(random(100)*1vw, 
                                                       random(100)*1vh);
              background: hsl(random(360), 100%, 65%);
              animation-duration: $t;
              animation-delay: -.01*random(100)*$t;
          }
      }
  }
  
  @keyframes shoot {
      0% { transform: translate(50vw, 50vh); }
  }
  @keyframes fade { to { opacity: 0 } }
  </code></pre>
  <p>This is how looks like:
  <img src="https://i.stack.imgur.com/Rg3Yq.png" alt="image" /></p>