Compass Background Image MixinPosted on: September 30, 2011

So my latest thing has been playing around with Compass, and I have been absolutely loving it! The following is just a cool little mixin I came up with...

If you've ever had an element that contains text that you wanted to just be an image (like, say, a logo) and you've knocked out the text with text-indent, set the background image, height, width, etc., then you'll want to check this out...

@mixin knockout($_img) {
  background: url($_img) no-repeat;
  display: block;
  height: image-height($_img);
  overflow: hidden;
  text-indent: -100%;
  width: image-width($_img);
}

Now, you just need to call: @include knockout('path_to_image.jpg');... and compass will do it all for you... including the height and width!

How did we ever live without this kinda stuff?