How to handle sprite images in responsive design?
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%;