0

Im making a image sprite sheet. The icons need to be half the size on mobile so the background-size needs to be half of the original image.

Is the only way to do this to set the background-size property in PX?

In some instances the images need to be 3/4 or there original size so being able to specify the background size as a ratio of the original image would be quicker and make the code easier to read.

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • possible duplicate of [How can I scale an image in a CSS sprite](http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite) – Andy Jun 24 '14 at 10:11
  • My question isn't answered by any of those answers. – Evanss Jun 24 '14 at 14:51

1 Answers1

2

Using background-size for mobile is good option as it's more widely supported.

You could set the background in percentage, if that's easier to read for you:

(1/2)

background-size: 50%;

(3/4)

@media only screen and (min-width: 480px){
    background-size: 75%;
}
Paul Redmond
  • 3,276
  • 4
  • 32
  • 52
  • That % is relative to the element, not to the background image size which I what I need. – Evanss Jun 24 '14 at 11:07
  • Sorry, can you clarify? – Paul Redmond Jun 24 '14 at 14:07
  • Background-size 50% will make the background be 50% of the size of the element its applied to. This isn't what I asked in my original question. Do you understand my original question? – Evanss Jun 24 '14 at 14:52
  • I misunderstood somewhat. From what I can gather, background-size will be resized based on the element unless you specify in pixels. – Paul Redmond Jun 24 '14 at 15:16