Headings as images - The Lindsay method
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;
}
