Any portion of this page, except the W3C graphics, is freely available to anyone who wishes to use it in its original or modified forms. There are no copyright restrictions or credit required. There is also no promise of compatibility, safety, or support. Use at your own risk or pleasure as the case may be.

Graphic designers want vivid grabbing graphics in the header of a page while SEO and accessiblbility folks want properly structured visible text right up front. Using CSS we can give the world BOTH. Simply using background images on, say, a H1 element and setting its text-indent to a large negative number will produce the well structured header text in the markup and in non CSS/Image capable browsers, while showing the well crafted visual presentation in more capable environments. However, should CSS be enabled but images not, we have a problem. The image will not show, but neither will the text. This would be a rare case-- that CSS would work but not images--but things can happen. In this case we would attempt to use JavaScript to remove the negative text-indent property from the text in order to get it displayed again.

To see the code, right click on the page and in Fx click "View Page Source", in IE click "View Source". If you find all the extra text and ads in this page confusing you in the source, go to the page that has only the pertinent code for the topic at hand and view the source there. The XHTML and CSS on this page create the H1 with background image and negative text-indent to produce the orange graphic at the top what says "Header Image". There is also a small transparent GIF at the very bottom of the page which should not be visible to anyone. When the document has loaded, JavaScript checks for the presence of the IMG element with the small transparent GIF and measures and compares its offsetWidth with the value it should have. If the value matches, images are loaded and there is nothing to worry about. If the image cannot be obtained or the value does not match, it is assumed that images are not working properly and JavaScript removes the negative indent from the header text.

Since we are talking about different environments and what could be enabled when and what issues could be caused, let's look at some different scenarios that could unfold using this method. By the way, I use the Firefox web browser with the Web Developer Toolbar to create the different scenarios and test.

• Images, CSS, and JavaScript enabled
  • Image shows
    • This should be the case with the standard browser and if cross-browser compatibility was taken into account, all users should see exactly what the designer intended.
• Images, CSS enabled; JavaScript disabled
  • Image shows
    • Though other things that need JavaScript will obviously fail, the case about which this page is concerned is just fine.
• CSS, JavaScript enabled; Images disabled
  • Text shows
    • Though this would not be a case we expect often, the user would still get something valid and meaningful.
• Images, JavaScript enabled; CSS disabled
  • Text shows
    • Though this would not be a case we expect often, the user would still get something valid and meaningful.
• CSS enabled; Images, JavaScript disabled
  • Nothing Shows!
    • In this case, CSS has moved the text out of sight, but the image has not shown up. JavaScript has been disabled so the text cannot be moved back into sight.
    • However, this case is going to be extremely rare.
    • The closest we will probably come to this scenario is the scenario in which all three are not available.
• CSS, JavaScript, Images disabled
  • Text shows
    • In this case the user gets nothing but the markup and the browser displays it using its default layouts.
    • 'Bots and Screen Readers are most likely to be in this situation and they will have nice semantic text to use in doing their jobs.