HOW TO HANDLE SPRITE IMAGES IN RESPONSIVE DESIGN?

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%;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>