Posted By

michellebracken on 08/18/11


Versions (?)

Replace Text with an Image

 / Published in: CSS

Better typography through more font choices is here, but there are still limitations to using it in practice. Sometimes the easiest solution is to use an image. However you also want the original text to be there for search engines and screen readers. A simple way to have both text and image is to use the text-indent property. The height and width should match those of your image

  1. 1 h1 {
  2. 2 text-indent:-9999px;
  3. 3 background:url("h1-image.jpg") no-repeat;
  4. 4 width:200px;
  5. 5 height:50px;
  6. 6 }

Report this snippet  

You need to login to post a comment.