Compass mixin that lets you completely specify a background-image in em: background-color, background-image, background-repeat, background-position, in em according to a given context.

gistfile1.txt

/** @subsection EM calculator			*/
/** cf. https://gist.github.com/ijy/1441967	*/

@function em($target, $context: $base-font-size)
{
   @if $target == 0 { @return 0 }
   @return 1em * $target / $context;
}

/** 
  * @subsection Full Background in EM
  * @author Marie Guillaumet
  *
  * In case $sprite-map == true, the $image variable must be a sprite's name, e.g. $social-sprites. This variable is automatically generated by Compass when your sprite image is created.
  * If $sprite-map == false (default), the $image variable must content a path to an image (e.g.: 'bg/image.png').
  */
@mixin em-background($image, $context: $fs, $sprite-map: false, $repeat: no-repeat, $color: transparent, $position: 0 0)
{
  	background-color: $color;
	background-repeat: $repeat;
	
	@if $sprite-map == true
	{
		/** 
		 * Let's retrieve the sprite image's dimensions
		 * @author https://groups.google.com/forum/?fromgroups=#!topic/compass-users/EnGxxzXDZp4
		 */
		$image-width:	image-width(sprite-path($image));
		$image-height:	image-height(sprite-path($image));
		
		background: $color $image $repeat $position;
		@include em-background-size($image, $context, true);
	}
	@else
	{
		$image-width:	image-width($image);
		$image-height:	image-height($image);
		
		background: $color image-url($image) $repeat $position;
		@include em-background-size($image, $context);
	}
}