CODEWITHSUNDEEP
csssasscompass-sasscss-spritesbackground-position
josh
josh

Reputation: 553

Compass sprite background positioning relative to the element?

I'm struggling to find a good solution for this, and there is nothing on the Compass page as far as I can tell.

The problem: Sliding door style css backgrounds.

Using a vertical stylesheet, I can get images with nothing at either side for my background sprites.

For the left side of my header, I simply include the sprite as so:

    @include header-plain-blue-left;
// will give me
  background-position: 0 -903px;

Then compass generates the CSS and it fits perfectly. The problem comes with the right side, where what I want is the sprite to be aligned with the right of the element, and as far as I can see, compass doesn't allow this.

The desired output is:

  background-position: right -903px;

The only I have it working is by creating a mixin and declaring the background filename and position specifically:

@mixin header-plain-blue-right {
     background: url(../images/sprites-s2ba933e4ea.png) no-repeat right -346px;
     }

Which is cumbersome and not very sassy...

Does anyone know of a way to get compass to do this? Am I missing something obvious? Or does anyone know of a plugin?

Or, if there is a way to control which image is added to the map first (and therefore the order in the spritemap), that could make adding things a whole lot easier...

Upvotes: 3

Views: 1365

Answers (2)

Zeal
Zeal

Reputation: 249

The following works for me in all browsers

@include sprite-background-position($sprite, tab, 100%, 0);

The 100%-value is the same like "right"-positioning.

Upvotes: 0

josh
josh

Reputation: 553

*update: False alarm. This doesn't work in Firefox. So it's useless. *

So, after far too long. I've realised the super simple way of doing this. Which i can't believe I didn't get earlier.

For anyone else that's having this problem. It's really *too*simple.

@include header-plain-blue-left;
background-position-x: right;

That simple css rule will override the compass generated positioning for x. And, as a bonus, if you need to position the sprite relative to the spritemap (offset), compass has a function for that too:

     @include <folder>-sprite-position(<sprite>, $offset_x, $offset_y)

I hope someone finds this helpful at least!

Upvotes: 2

Related Questions