Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CSS: Replacing Text By An Image
/* http://meiert.com/de/publications/articles/20050513/#toc-gilder-levin */
#logo {
width: 200px;
height: 50px;
position: relative;
}
#logo span {
background: url(logo.png) no-repeat;
width: 100%;
height: 100%;
position: absolute;
}
/* https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7 */
#logo {
width: 200px;
height: 50px;
background: url(logo.png);
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
/* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
#logo {
width: 200px;
height: 50px;
background: url(logo.png);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#logo {
width: 200px;
height: 50px;
background-image: url(logo.gif);
overflow: hidden;
line-height: 9999px;
}
/* http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/ */
#logo {
width: 200px;
height: 50px;
padding: 0;
margin: 0;
overflow: hidden;
}
#logo:before {
content: url(logo.png);
display: inline-block;
font-size: 0;
line-height: 0;
}
#logo {
width: 200px;
height: 50px;
background-image: url(logo.gif);
}
#logo span {
display: none;
}
#logo {
width: 200px;
height: 50px;
background: url(logo.png);
overflow: hidden;
text-indent: -9999px;
}
/* http://37signals.com/svn/posts/3126-another-9999px */
#logo {
width: 200px;
padding-top: 50px;
background: url(logo.png);
height: 0;
overflow: hidden;
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment