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.

Answer 1

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