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?