Compass sprite background position is not as i want it

Question

I'm first-time using Compass spriting. I wanted to have icons images (all are in little different in sizes) centered position. like the attached image

I'm using this setting

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

the css i'm getting is (for example)

.icons-adventure {
  background-position: 0 -608px;
}

It's not that as I required. I want to give more spacing from top and left.

Answer 1

You may want to check out this Github Gist: https://gist.github.com/adamlogic/3577147, which has helped me fix spriting issues in the past and also gain a better understanding of how spriting in Compass works.

Of particular interest to you may be the portion where the author mentions the following: (pasted here in case the Gist is removed)

"I took this a bit further by defining my own (sprite) mixin."

$spritemap-spacing: 50px
@import "spritemap/*.png"

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
  background-image: $spritemap-sprites
  background-repeat: $repeat
  +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)

  // if no offsets given, set the dimensions of the element to match the image
  @if $offset-x == 0 and $offset-y == 0
    +sprite-dimensions($spritemap-sprites, $name)

"and how I'm using it"

// simplest case; sets the background image and dimensions of the element
h3
  +background-sprite(ribbonfull)

// custom offset; does not set the dimensions of the element
h2
  +background-sprite(ribbonend, no-repeat, 3px, 22px)

// repeating backgrounds are possible, too
#positions
  +background-sprite(doubleline, repeat-x, 0, 45px)

And, the author's generated CSS:

h3 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: repeat-x;
  background-position: 0 -751px; }

Answer 2

I’ve found two workarounds for this issue, both not perfect:

1. You can simply save the icon in your image editor with the necessary padding - it works if you want to use it only in one place, otherwise you have to create duplicates (which is why this doesn't always work).
2. Other solution is to use pseudoelements. Assuming is the element you want to add the background to and you’ve placed your icons in icons folder:

@import "icons/*.png";

el { 
  position: relative; 
}

el:after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  @include icons-sprite(some_icon); 
  margin-top: - round(icons-sprite-height(some_icon) / 2); 
  margin-left: - round(icons-sprite-width(some_icon) / 2);    
}

Answer 3

$icons-spacing defines the number of pixels that separates each image in the generated sprite map. I believe you want to adjust the $icons-position which adjusts (offsets) the generated background-position styles