CSS sprites with dynamic size

Question

I decided to compile a sprite sheet for the entire site (+ -30 images) so that I could upload 1 image and only reference positions, which reduces image loading time and server calls.

My question is: Is it possible to refer to an image on a sprite sheet, and then the size of this image is up to 100% of its parent container?

So for example:

#SomeDiv { background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat; width:100px; } 

The width of my div is 100px, but the sprite I want to reference is 20px (for example) - how can I remove the extracted sprite to 100px?

Regards, Byron Cobb

Answer 1

Well, if you really want to get an answer, of course, why not. See: http://jsfiddle.net/3dsgn/3/

We mainly work with CSS3 here, so IE support (except 9) does not exist. You will also have to use the version with the extension -moz- for Firefox 3.6 and below. The technique itself is also somewhat troublesome. Naturally, you must calculate the numbers yourself - interest will not work.

 #sprite-large { /* All of these numbers are 2x their normal, though tweaked slightly so that they will look okay */ width: 36px; height: 36px; background: url('url/to/your/image.png') -38px -112px; -moz-background-size: 448px 368px; background-size: 448px 368px; }