SVG sprite (background mode)

Positioning Size SVG PNG Comment
Absolute (px) Original Clear weather icon Clear weather icon  
Absolute (px) Double Clear weather icon Clear weather icon Can't work without setting an absolute size for background-size. Scaling the absolutely positioned sprite screws up the image offset (which would have to be scaled as well)
Relative (%) Original Clear weather icon Clear weather icon  
Relative (%) Double Clear weather icon Clear weather icon  

The formular for calculating the relative position of a particular sprite image is as follows:

$percentage = $imageOffset / ($spriteDimension - $imageDimension) * 100%

This holds true for both absolute as well als relative values. The following example will display the 7th image of the above sprites, with each original image being 48 x 48 pixels and the sprites holding 10 images each:

$percentage = 288px / (480px - 48px) = 60% / (100% - 10%) = 0.666666 = 66.666666%