CSS and Images
Let’s replacement an image using CSS, we’ll do so by taking a page element that isn’t normally an image and turning it into an image. This is a very common trick and popular because of it’s semantic meaningfulness and SEO benefits. Let’s try this out using the header tag.
One Way
<h1 class="header">
CSS-Tricks
</h1>h1.header {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}PROBLEM:
If you turn CSS off, this will just degrade into text. Not a bad thing, but just because someone has their CSS turned off doesn’t necessarily mean they want their images turned off too.
Another Way
<h1 class="header">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>h1.header {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}WHY THIS IS BETTER:
With CSS turned off you can still display an image. With CSS and images turned off, you will get the ALT text from the image.
REMAINING PROBLEMS:
Neither of these techniques are perfect yet, a problem still remains with CSS ON, images OFF. In this scenario you will get blank space instead of either text or an image, which is bad. The other issue is turning these elements into links. You can wrap the header tag in an anchor element, but wrapping a block element in an inline element is bad form. Make sure you change your anchor link to block level if you do this.
