Compass Background Image Mixin Posted on: 2011-09-30

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?