Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A rails plugin to generate css sprite image automatically

branch: master

This branch is 0 commits ahead and 0 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time



A rails plugin/gem to generate css sprite images automatically.
Supports Transparency in PNGs/GIFs


install rmagick gem first:

sudo gem install rmagick

install it as a gem:

sudo gem sources -a
sudo gem install css_sprite

or install it as a plugin:

script/plugin install


Add files with the pattern “css_sprite*.css” (e.g. css_sprite.css, css_sprite_stars.css) to
the config directory.
All files starting with css_sprite and ending with .css will be processed.
This enables you to group your sprites together.

The following configuration parameter are possible:

  base_directory: public/images              # Base directory for source and target images (defaults to "public/images")
  css_output: tmp/css_sprite_stars.css             # Where to put the CSS File (defaults to tmp/css_sprite.css)

– description: Stars with transparency # description (will not be processed)
sources: # List of files to convert to a single sprite
– sc-mcstars0.png
– sc-mcstars1.png
target: stars_png_with_transparency.png # Where to put the resulting sprite ()
align: horizontal # Align the Sprites “horizontal” or “vertical” (default)
spaced_by: 50 # Empty pixel between each image (defaults to 0)

- description: Second Sprite … # Second Sprite definition …


if you use it as a gem, add a task lib/tasks/css_sprite.rake first:

require 'css_sprite'

if you use it as a plugin, ignore the step above.

then just run rake task:

rake css_sprite:build

the result css is generated as defined in the corresponding css_output parameter:

    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px
    width: 20px
    height: 19px
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
    width: 20px
    height: 19px
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px
    width: 19px
    height: 18px
    backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px
    width: 19px
    height: 18px

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

Something went wrong with that request. Please try again.