html – How do i put a image in particle explosion

I need to replace the particles with an image, i already tryed to do background-image: but doesn’t work.


$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;
        
        &: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 } }

1