Frontendplace Blog

An inline image is an image that is generated as base64 string inside the stylesheet. But this is not supported by IE6 if you want to support both you can use the * hack for IE6 like this:

@import "compass";
@mixin inline-image($url, $repeat:repeat){
  background: inline-image($url) $repeat;
  *background: image-url($url) $repeat;
}
.facebook {
  width: 34px;
  height: 34px;
  @include inline-image("icons/facebook.png",no-repeat);
}

And generates:
.facebook {
width: 34px;
height: 34px;
background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAFbUlEQVR4XrWXT4hd…’) no-repeat;
*background: url(‘../images/icons/facebook.png?1346742026’) no-repeat;
}