Responsive Sprites/Percentages

responsive sprites / percentages

The div dimension doesn't play in the calculus, only the background sizes, and the part that you are going to use.

Lets say that your background has a width of 1000px and a height of 500px.

The image that you are going to use has 80px width and height.

background-size:

x part     1000px / 80px = 12.5   ->> 1250%
y part      500px / 80px = 6.25   ->>  625%

background-size: 1250% 625%;

background-position:

x-part     173px / 1000px = 0.173   ->> 17.3%
y part     293px / 500px = 0.586    ->> 58.6%

background-position: 17.3% 58.6%;

Sprites with background position and width percentage in responsive design

The problem is with background-size: cover. The browser doesn't render a correct width and height. To fix it i use:

background-size: 100% 900%; // 100% to adjust to width and 900% is to mantain proportions in the height. (9 images of 102px in this case)

I tested in chrome 26.

How to use CSS sprites within a responsive design

You can use:

• generated content (:before/:after) instead of real elements to keep code clean;
• background-size property to zoom your background images;
• Data URIs instead of sprites. Data URIs are supported by all current browsers (IE8 has 32KB limitation of maximum size for each file represented as a Data URI).

Is it possible to use percentage-based positioning with CSS sprites?

Sprites are not responsive. They are fixed-size bitmaps, they don't scale. So your dimensions should be fixed.

---

Related Topics