Let’s assume the following first:

• background size is width:1000px,
height:500px,
• the image dimensions are 80px w, 80 px h,
• position -173px, -293px in the sprite sheet.
Then,
background-size:

x part 1000px / 80px = 12.5 => 1250%
y part 500px / 80px = 6.25 => 625%

background-position:

x-part 173px / 1000px = 0.173 => 17.3%
y part 293px / 500px = 0.586 => 58.6%

CSS would look like this
background: url(‘images/sprites.png’) no-repeat
background-size: 1250% 625%;
background-position: 17.3% 58.6%;

The post HOW TO HANDLE SPRITE IMAGES IN RESPONSIVE DESIGN? appeared first on Pro-Tek Blog.