Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* 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 */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

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 CSS2, then there are some better ways using the content property, but unfortunately the web isn't 100% there yet.

you can simply hide your text by add this attribute:

font-size: 0 !important;

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

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

The answer is to create a span with the property

{display:none;}

You can find an example at this site

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

If we can edit the markup, life can be easier, just remove text and be happy. But sometimes the markup was placed by JS code or we just aren't allowed to edit it at all, too bad css turned to be the only weapon placed at our disposal.

We cannot place a <span> wrapping the text and hide the whole tag. By the way, some browsers do not only hides elements with display:none but also disables the components inside.

Both font-size:0px and color:transparent may be good solutions, but some browsers don't understand them. We can't rely on them.

I suggest:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

Using overflow:hidden enforces our width & height. Some browsers (will not name them... IE) may read width and height as min-width and min-height. I want to prevent box to be enlarged.

Content replacement is directly available in CSS by using the content property.

This seems to be most commonly used to generate ::before and ::after pseudo-elements, but can also be used to replace the content of existing HTML elements.

For the original example

<h1>My Website Title Here</h1>

this is the CSS that will replace the text with the logo:

        h1 {
            content: url(mywebsitelogo.png);
            width: 100%;
        }

While in pseudo-elements, any image content cannot be resized (except by using it as a background image), this is not the case for replaced content.

By default, the image will appear at its actual size, expanding the container if necessary, exactly as if it contained an actual <img> element.

In this example, width: 100% is used to fit the logo image to the full width. If the image should be shrink to fit, if needed, but never expanded if the container is larger than the image, then max-width: 100% can be used instead.

According to MDN, the only regular browser which does not support CSS content replacement is Internet Explorer.