rgbapng - Compass plugin

rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.


Installation is simple via Ruby Gems. Compass and ChunkyPNG are required.

gem install compass-rgbapng

Using rgbapng with your Compass project

To use rgbapng with your project, require the plugin from your Compass configuration:

require "rgbapng"

And then import the mixins to your SASS/SCSS files:

@import "rgbapng";

Configurable variables

There are two customzable global variables. This first $rgbapng_path defines the path to which your PNG images will be saved. This defaults to rgbapng inside your Compass images directory. The second $rgbapng_px_size defines the pixel square size of the generated png. This defaults to a 5x5 square.

$rgbapng_path: 'my_pngs';
$rgbapng_px_size: 8;


There are two mixins available to you.

rgba-background($color, [$path, $pixel])

Sets the background property to use the RGBA value, falling back to the compiled PNG.

@include rgba-background(rgba(0,0,0,0.75));

Compiles to:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

rgba-background-inline($color, [$pixel])

Sets the background property to use the RGBA value, falling back to a base64 encoded image data.

@include rgba-background-inline(rgba(0,0,0,0.75));

Compiles to:

background: rgba(0, 0, 0, 0.75);


There are two Sass::Script functions which can be used in your SASS:

# Creates the single pixel PNG image
# Returns a String of the image path and filename
png_pixelate(color, [dir])

# Returns a String of the base64 encoded image data

* Cross-browser? Really?

OK, caveat time. When I say "cross-browser", what I really mean is all browsers that either natively support RGBA or support alpha-transparent PNGs. What I don't mean, is IE6. If alpha-transparency in IE6 is important to you, here are some suggestions:

The choice is yours.

Credit where it's due


Copyright (c) 2010 Aaron Russell. See LICENSE for details.