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: enter image description here

Could you clarify how this would be useful? The background-position property offsets are from the top left corner (unless the browser supports the 4 value syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position). — cimmanon, Aug 13 '13 at 23:04
I've added a picture in my question to illustrate how this could be usefull. Default is on the left, what I want to acomplish on the right. — Jrn, Aug 14 '13 at 06:31
Can you manually write out the CSS that will make this work with your Compass generated sprite? I don't see how what you're asking for is possible from a CSS perspective. — cimmanon, Aug 14 '13 at 11:22

score 1 · Accepted Answer · answered Aug 15 '13 at 13:35

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;    
}

Compass/Sass background-image positioning

1 Answers1