There are so many things to keep track of when you're learning CSS. I've found it helpful to keep similar tips and examples together so I can find them quickly. Here's my "cheat sheet" on images.

But before you get into the examples, if you're not sure what the fuss is about or if you haven't read it already, take a look at Dimitri Glazkov's "Graphics and Structural Markup: Keeping 'pretties' out of content." In summary, he says:

Content graphics comprise the content of the page or serve as illustration for text content... Presentational graphics serve the decorative purposes of a page.

His explanation of why "presentational graphics have no place in structural markup" is one of the clearest I've read.

To put an image behind text:

Style:

HTML:

To replace text with an image:

The technique I've been using is from Dave Bowman's Fahrner Image Replacement tutorial. However, I started using it before I realized that it wasn't completely kosher. Bowman's tutorial begins with this warning:

PLEASE NOTE: The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article under “Important Notes”.

None of the alternatives seem a whole lot better to me, though. Dave Shea maintains a comprehenisve list with examples of alternatives to FIR, called "Revised Image Replacement." I've looked the list over, but have to admit that, out of sheer laziness, I haven't yet tried the other methods. Hopefully I'll get to it soon.

Style:

HTML:

UPDATE:

I finally settled on an image replacement technique. I'm using the method Dave Shea uses on his mezzoblue.com. He may have gotten it from someone else, and if so I apologize for not knowing to whom to attribute this method. It is very similar to the Fahrner method, except that the text is not hidden by a <display: none>. Instead, the text is styled to be very small and the same color as the background of the image. This hides the text well for most images, yet it can still be read by a screen reader. Also, it is easy to add a link to make the image clickable.

 

Style:

#logo h1 {
    background: transparent url(images/logo.gif) no-repeat;
    display: block;
    width: 130px;
    height: 73px;
    font-size: 1px;
    color: #fff;
    border: none;
    }

HTML:

<h1 id="logo">Site Name</h1>

To make the image clickable, add:

Style:

#logo h1 a:link, #logo h1 a:visited, #logo h1 a:hover, #logo h1 a:active {
    color: #fff;
    width: 130px;
    height: 73px;
    font-size: 1px;
    border: none;
    text-decoration: none;
    }

HTML:

<h1 id="logo"><a href="index.html" title="Home for Site Name"></a></h1>

Wrapping text around images—with a caption:

I got this tip from Elise Bauer's Learning Movable Type, which has a whole host of great advice and tips, and not just about Movable Type.

Style:

HTML:

Adding an Image When There's No Tag Available:

I can't remember where I got this tip, or if I just came up with the solution on my own. It's not very complex. If there's no readily apparent element to hang an image on, you can create one, like a div. For instance, I wanted an image line for delineating groups of text, and for one reason or another couldn't use a list or header to hang it on. So I created an artifical "box." Only use this solution, though, when you absolutely must; you don't want to clutter up your page with empty, non-structural tags.

Style:

HTML:

Replacing bullets with images:

This is a nifty tip from MaxDesign's Listomatic. They offer a whole collection of tutorials on different types of lists and are well worth a visit.

Style:

HTML:

As I come across new image tips or find better ways of doing things, I'll add them here. It's a handy page for me to refer to when I get stuck, which happens to be pretty often. As I have time, I'll gather up more loose CSS tips for additional cheat sheets. Hope this helps someone.