1

I have a div (suppose 30px width and 30px height) and i am using a sprite image for all the images ,now there is one image in the sprite at background-position : -12px -1467px (just an example) whose width and height is 70px and i want to apply this image as background to given div.

The problem is how to scale that image to fit in the div size.

This should not break if i increase or decrease the div size based on resolution.

My sprite's width and height can be changed (more images can be added later in the sprite).

This question may be duplicate as few people suggested but i am not able to understand those question properly. I have created a fiddle for this.

In the fiddle 2nd div shows the original sprite,and in the first div i want to show only first image but when i resize the div the first image should resize with div (like if i am using an individual image instead of a sprite).

One way to do this to have first div equal to first image and then on resize use something like transform:scale(.5) ,but i don't want to use that.

tarun chine
  • 145
  • 11
  • Possible duplicate of http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite – Tricky12 Jan 14 '16 at 20:51
  • you need background-size and reset background position according to that new size :) an example : http://codepen.io/gc-nomade/pen/Hezro – G-Cyrillus Jan 14 '16 at 20:56
  • actually this pen http://codepen.io/gc-nomade/pen/Hezro belong to this answer : http://stackoverflow.com/questions/20310994/using-sprites-within-a-div-of-100/20311537 might be a duplicate as well – G-Cyrillus Jan 14 '16 at 21:13
  • Duplicated, more info in: http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite – Morris Ruschel Aug 22 '16 at 18:11

1 Answers1

0

Set background-sizeto whatever % you need to fill the div

jaegs
  • 489
  • 6
  • 15