Hide text using css

Question

I have a tag in my html like this:

<h1>My Website Title Here</h1>

Using css I want to replace the text with my actual logo. I've got the logo there no problem via resizing the tag and putting a background image in via css. However, I can't figure out how to get rid of the text. I've seen it done before basically by pushing the text off the screen. The problem is I can't remember where I saw it.

Thanks.

Answer 1

The answer is to create a span with the property

{display:none;}

You can find an example at this site

Answer 2

the most cross-browser friendly way is to write the html as

<h1><span>Website Title</span></h1>

then use CSS to hide the span and replace the image

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

if you can use CSS 2, then there are some better ways using the content property. but unfortunatly the web isn't 100% there yet.

Answer 3

you can use the css 'background-image' property and 'z-index' to ensure the image stays in front of the text.

Answer 4

This is the proper way.

h1 {
    text-indent: -3000px;                 //sends the text off-screen
    background-image: url(/the_img.png);  //shows image
    height: 100px;                        //be sure to set height & width
    width:  600px;
    white-space: nowrap;                  //because only the first line is indented
}

h1 a {
    outline: none;  // prevents dotted line when link is active
}

Answer 5

This is actually an area ripe for discussion, with many subtle techniques available. It is important that you select/develop a technique that meets your needs including: screen readers, images/css/scripting on/off combinations, seo, etc.

Here are some good resources to get started down the road of standardista image replacement techniques:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Answer 6

See mezzoblue for a nice summary of each technique, with strengths and weaknesses, plus example html and css.