Comments on: An Alernative to Negative Text Indent for Image Replacement – CSS

By: David

David — Sat, 23 Jan 2010 20:41:12 +0000

All methods described above have their disatvantages.

The opacity-method could be even easyer with using "visibility:hidden". This method though, is not used much because there are rumours that some search-engine spiders ignore links that are hidden by CSS.
Also, this method requires an extra element inside the element with the image-replacement.

With an overlay div, you won't be able to click on links under the overlay. So it won't be able to link your logo to the index page. Also, for menu's this method is useless.

Using negative text-indent has none of these disadvantages. It's the only method that doesn't require any changes in your HTML. And that's really a good thing for accessibility, SEO and page-load time.

By: Luke Franklin

Luke Franklin — Sat, 13 Jun 2009 12:07:54 +0000

Here's my method and it's even less hacky.

HTML:
<div id="Banner"> <h1>Innovative Web Design</h1> <q>The greatest innovation is simplicity!</q> <div class="Overlay"> </div></div>

CSS:
#Banner
{
position: relative;
width: 100%;
height: 300px;
text-align: center;
background-color: #c5e3fa;
}
#Banner h1
{
padding-top: 100px;
}
#Banner .Overlay
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url( '../Images/Banner.jpg' );
background-position: center bottom;
background-repeat: repeat;
}

By: rob

rob — Sat, 06 Jun 2009 23:03:06 +0000

Hi Chris,

That is simpler, but it fails in a basic way I normally use the pattern.

I actually set the to display:block and give it a height and width to set a hit area for clicks, so setting display:none is not an option.

By: Chris

Chris — Fri, 05 Jun 2009 21:24:11 +0000

You could also use display: none on the element. Much simpler.

By: Joel

Joel — Tue, 13 Jan 2009 18:04:07 +0000

or you could just do this:

a:active, a:focus {outline:none;}

problem solved!