Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Replace Text with Images using CSS (See related posts)

This will replace your H1 tag with a 100px by 100px logo.
Users with CSS disabled will see whatever is in 
<h1>Company Inc.</h1>

users with CSS will see the Company Inc. logo
to use this, add this to your stylesheet:
h1 {
	text-indent: -100em;
	overflow: hidden;
	background: url(logo.png) no-repeat;
	height: 100px;
	width: 100px;
	}
to css images image standards semantics replacement by caseygollan on Sat Apr 16 02:13:46 -0400 2005

Comments on this post

jbjaaz posts on May 04, 2006 at 22:04
Note, with images turned off, the text is not seen. So for instance, if you use this method for a navigation bar, with images turned off, there is no way to see the menu links.

The Gilder-Levin method is a good alternative (http://www.mezzoblue.com/tests/revised-image-replacement/)

Note, yes, its rare that people are browsing around with images off and css on, but if you do care, gilder-levin is a nice solution.

You need to create an account or log in to post comments to this site.


Click here to browse all 4861 code snippets

Related Posts