DZone 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

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Replace Text With Images Using CSS

04.16.2005

| 18681 views |

        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;
	}

Tags:

Comments

Snippets Manager replied on Thu, 2006/05/04 - 9:07pm

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.