Understanding how to use image sprites

Image Sprites
This is not the same as the below code and should be.

 .playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
   border: 3px solid #0059dd;
    background-position: -0px -260px;
   width: 260px;
   height: 260px;
 }
 
 .playButtonb.active {
   border: 3px solid #e77d19;
  background-position: -0px -0px;
   width: 260px;
   height: 260px;
 }

It’s not the same as this:

It should look and act like this:

.playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
   border: 3px solid #0059dd;
 }
 
 .playButtonb.active {
   border: 3px solid #e77d19;
   background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/E0dNaoX.png");
 }