The current CSS3 recommendation (more precisely, this version of the candidate ) provides new opportunities for positioning background images, which can be very useful when working with CSS sprites.
I'm particularly interested in the possibility of lowering the background position, as well as adding an offset (at the bottom of the image), so this:
#container {
background-image:url(sprite.png);
background-position:bottom -100px left 0;
}
will take my image sprite.png, snap it to the bottom of my element #container, and then drag it to 100 px so that the bottom 100 pixels of this image are not displayed. the image will then fill up from below as high as #container.
This works fine in Chrome (version 29.0.1547.76 m), Firefox (24.0) and IE10. But I can not test IE9. Does IE9 support this new syntax?
I have an old Windows XP machine that I can test on in IE8 and it definitely doesn't work.
Edit
I had the opportunity to do some tests, and I can confirm that it works in IE9 (tested in Win7 Pro 32bit)
source
share