Replacing Headers with Images
Fahrner’s Image Replacement (or FIR) is an extremely popular and equally controversial technique for replacing text with a graphic image of that text. It is one of the principal techniques used at the CSS Zen Garden, that hotbed of avant-garde CSS, but is criticized on accessibility grounds.
To replace a header with images:
1. | In the CSS document, set the background property of the header (h1 in the example) to the desired image.
|
2. | Set the height of the header to the height of the image.
|
3. | Hide the text in the span element by using h1 span {display:none}.
|
4. | Save the CSS document with the .css extension.
|
5. | In the head section of your (X)HTML document type <style type="text/css"> to begin the internal style sheet. ... |
Get HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
