The most common use of this technique is to replace an h1 title of a page with a graphical header. This is done so the markup is still an h1 tag with text and it is only visually changed to an image with css. By maintaining the structured text improves SEO and makes for a nice text only print option. Another common use is to turn a regular text hyperlink into a graphical button complete with mouseover effects without affecting the code behind the link itself.
h1 {
width: 760px;
height: 150px;
text-indent: -9999px;
overflow: hidden;
background: transparent url(header.jpg) top left no-repeat;
}
The text indent effectively overflows the text outside the visible range, and overflow hidden ensures when you select the h1 you don’t get the selection trail that extends to the hidden text.
Now if you want you can also do the same thing but instead of setting the background, width and height on the h1 itself, setting it on a hyperlink inside the h1 allows the background image to become a link. This is also how you would go about making a hyperlink into a graphic button.
Merge Facebook Event and Group
Merge Facebook Event and Group