Skip to content
Compass plugin for providing cross-browser compatible RGBA support by creating transparent PNGs on the fly for browsers that don't support RGBA. Uses the pure Ruby ChunkyPNG library for hassle free install and deployment.
Find file
Latest commit 71c2072 @aaronrussell Update gem version.
Failed to load latest commit information.
lib Ref #15. Ensure the functions correctly use pixel parameter. Include …
LICENSE Created LICENSE and README Customize the size of the generated pixel.
compass-rgbapng.gemspec Update gem version.

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.

Something went wrong with that request. Please try again.