Accessible image replacement

0

Normally examples of image replacement don’t include a link, but you usually want the logo to link somewhere. With a small tweak here’s how:

.replace {
      position:relative;
      margin:0; padding:0;
}
.replace span{
      position:absolute;
      top:0; left:0;
}
#logo a, #logo span {
      display: block;
      width:218px;
      height:51px;
      background-image: url('images/logo.jpg');
}
<h1 id="logo">
<a class="replace" href="#" title="Site name">Site Name<span></span></a>		
</h1>

Note: This example ensures the text is visible if images are turned off. This technique does not work with transparent images.

Add a comment

Leave a Comment

Your email address will not be published.