Russ Weakley
01-Aug-03

There has been a lot written lately about how to use CSS-based images for headings in order to keep presentation seperate from content.

Apart from using inline images for headings, or the slightly more semantic option of wrapping these inline images inside HTML heading tags, there are many CSS-based and flash-based methods available. Each of them has advantages and disadvantages.

The Lindsay method

The Lindsay method uses existing elements as a starting point for CSS. The H3 is given a background image through CSS but the actual H3 text is still on the page, just hidden by making it very small, and of similar colour to the background of the image.

Advantages:

The image is seperate from the content so if no css support is present the HTML heading will display
There is no additional span or div tags required.
The text is still present on the page (not turned off via display: none), so it is searchable and readable by assistive technologies

Disadvantages:

User stylesheets can over-ride the tiny font size and cause the HX to display over the top of the background image
Users who come to the page with CSS supporting browsers but with images turned off will get no heading at all
Heading here HTML

<hx id="sample4">
Heading here
</hx>

CSS

#sample4
{
width: 400px;
height: 100px;
background-image: url(heading.jpg);
background-repeat: no-repeat;
font-size: 1px;

color: #fff;
}