Skip to content

Instantly share code, notes, and snippets.

@adamstac
Created September 11, 2011 20:42
Show Gist options
  • Save adamstac/1210097 to your computer and use it in GitHub Desktop.
Save adamstac/1210097 to your computer and use it in GitHub Desktop.
header[role="banner"] h1 {
text-indent: -119988px;
overflow: hidden;
text-align: left;
background-image: url('../images/logo.png?1315759894');
background-repeat: no-repeat;
background-position: 50% 50%;
width: 241px;
height: 91px;
}
header[role="banner"] h1 {
position: relative;
}
header[role="banner"] h1 a {
position: absolute;
height: 100%;
width: 100%;
}
// This usage example assumes you've imported the mixin
// from a library or further up the stack
// IMPORTANT: This example also leverages a mixin available in Compass
h1 {
@include replace-text-with-dimensions("logo.png");
@include stretch-link;
}
// This can also be condensed to one line:
h1 { @include replace-text-with-dimensions("logo.png"); @include stretch-link; }
// Here's an alternate using mixins only from Compass
// Thanks for the heads up Chris: https://twitter.com/#!/compass/status/112994911632101376
h1 {
@include replace-text-with-dimensions("logo.png");
position: relative;
a { @include stretch; }
}
// And again, condensed to one line:
h1 { @include replace-text-with-dimensions("logo.png"); position: relative; a { @include stretch; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment