How to use same sprite image as background-image with different positions(one position over another) in a same div?

Original sprite image
Result I'm trying to achieve

I am trying to overlay an icon from a sprite image over an image from the same sprite with just css. I've attached the image of what I'm trying to achieve and the sample of original sprite image. I've searched the internet but it didn't help much. It'll be better if you explain the concept or point to the source of concept as well. :) Thanks in advance.

<div class="course-banner deep-learning"></div>

.course-banner::after,
.course-banner::before {
    background: black url(./images/sprite-courses.webp) no-repeat 0 0;
}

.course-banner::after {
    background-position: 0 0;
    left: 0;
}

.course-banner::before {
    background-position: 100% 0;
    right: 0;
}

.course-banner::after,
.course-banner::before {
    content: "";
    height: 100px;
    width: 342px;
    position: absolute;
    top: 0;
}

.deep-learning::before, .deep-learning::after {
  background-position-y: -2640px;
}

Solution

you can use multiple background and lay the translucide part first :

example for the first row of images

element {
  height: 100px;
  width: 340px;
  background: 
    url(https://i.sstatic.net/Hpp67.png) top left,
    url(https://i.sstatic.net/Hpp67.png) top right; 

}

online demo because your png is not translucide