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%