Compass/Sass background-image positioning

Question

When using sprites in Compass/Sass, you get a background-image and a background-position generated.

For example:

background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;

This background image is positioned in the upper left corner of your element. With normal CSS I can change this to the bottom right corner like so:

background-position: right bottom;

However, this doesn't work when using a sprite, as its for the entire sprite instead of each image in my sprite.

How can I tell Compass/Sass to place each image of my sprite in the bottom right corner, instead of upper left?

Note: the element I'm using this sprite on, changes in height, so I can't use fixed pixel values.

Thanks.

EDIT: I'm including this image to illustrate what I mean:

Answer 1

I was able to achive this using the :after psuedo class on my element. You need to give the :after class a width and height equal to your image, and position it using CSS.

.element {
  position: relative;
  /* your element css */

  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 60px;
    height: 60px;
    right: 0;
    bottom: 0;
    background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
    background-position: 0 -120px;    
}