Skip to content
automatically css sprite
Ruby CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



automatically css sprite.


I have rewritten the plugin. Please check out the gem version >= 1.3.0


css_sprite depends on the rmagick gem, please make sure RMagick is successfully installed on your system.

install css_sprite as a gem:

sudo gem install css_sprite

or install css_sprite as a plugin:

script/plugin install git://


1. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under public/images directory

2. if you install the css_sprite as a gem, you should add css_sprite task in Rakefile

require 'css_sprite'

If you install it as a plugin, you can skip this step

2. define config/css_sprite.yml, it is not necessary by default.

3. start css_sprite server

rake css_sprite:start

4. put any images which you need to do the css sprite under the css_sprite directory, then you will see the automatically generated css sprite image and css files.

5. include the stylesheet in your view page

<%= stylesheet_link_tag 'css_sprite' %>

You can stop the css_sprite server by rake css_sprite:stop

Or you can just do the css sprite manually by rake css_sprite:build


There is no need to create any configuration by default. If you want to use sass or you want to define common styles for some related classes, you need to define config/css_sprite.yml file.


  • For css
      button: |
        text-indent: -9999px;
        display: block;
        cursor: pointer;
        font-size: 0;
        line-height: 15px;
        border: 0;
        outline: 0;
      icon: |
        text-indent: -9999px;
        cursor: pointer;
  • For sass
    engine: sass
      button: |
        text-indent: -9999px
        display: block
        cursor: pointer
        font-size: 0
        line-height: 15px
        border: 0
        outline: 0
      icon: |
        text-indent: -9999px
        cursor: pointer

engine defines css (default) or sass file to generate.
suffix defines the customization styles for specified images.
The customization above means if your image filename is button suffixed (e.g. post_button.png), the corresponding class .post_button has the additional style with (outline: 0; border: 0; and so on),
if your image filename is icon suffixed (e.g. twitter_icon.png), the correspondiing class .twitter_icon has the additional style with (text-indent: -9999px; cursor: pointer)

Best Practices

I have written a post css sprite best practices to introduce the idea that the css_sprite gem follows.

Copyright © 2009 [Richard Huang (], released under the MIT license

Something went wrong with that request. Please try again.