CODEWITHSUNDEEP
csssasscompass-sass
Jitendra Vyas
Jitendra Vyas

Reputation: 152777

Compass sprite background position is not as i want it

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

enter image description here

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.

Upvotes: 13

Views: 3715

Answers (6)

Ronak Jain
Ronak Jain

Reputation: 1783

If you are using Bootstrap 3 just use the following code, its simple and clean,

SASS File 

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

And in the HTML/Slim File I just use the center-block provided by Twitter Bootstrap 3, My HTML helper,

=content_tag('div','',:class=>'home-save_money center-block')

Basically it just center align the images into the center of the div, all the answer above use some custom Mixins or a hack.

PS: Even if you dont use twitter bootstrap, just use the following CSS, that would do the trick,

display: block;
margin-left: auto;
margin-right: auto;

I hope this helps some one,

Upvotes: 0

Zeal
Zeal

Reputation: 249

If you know the size of your icon you could set a default height for all icons and give single icons an vertical offset of (default height - icon height)/2 and position horizontal with center:

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);

Upvotes: 0

Chris Danek
Chris Danek

Reputation: 687

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

Upvotes: 3

ctrlaltdel
ctrlaltdel

Reputation: 685

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

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

First off, a good question...

When you give sprites in CSS, you will be able to generate classes with the .image-name. And this is how Compass sprites work. Your image will be appended to a big sprite image, and all the irregular images will be clubbed together in a grid manner.

Even though $icons-spacing gives you the ability to give some padding to the grid, it won't be that easy for you to put it in this case. So, going ahead with what is generated, we will do the following.

So, if you want something like the picture, you need to center the element, which has the Compass generated class.

Now say, you have adventure.png in it and it has generated this class:

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

Now, if you want to make this centered, you can make this way.

<div class="border">
    <i class="icons-adventure"></i>
</div>

And for the border class, give padding. So, what I mean here is, you have wrapped the .border on the .icons-adventure. Now, you need to give some padding and width to it.

.border {padding: 15px; width: 40px;}

Here, there's is no need of height, as the height is automatically taken care. Let me come with a fiddle for you to get a clear explanation.

Upvotes: 0

maxbeatty
maxbeatty

Reputation: 9325

$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

Upvotes: 1

Related Questions