CSS Typography | Examining Image Replacement
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=216
What I Learned
There is a lot of great information in this online tutorial. This particular section addresses how to substitute elements on the page (particularly headings) for images. I learned about the restrictions and limitations that background images have with screen readers and accessibility devices, especially using images to display text. In order to still provide some sort of feed back for the screen readers you need to have the actual text in your document. This section of the tutorial taught me how to have that text available when needed, but still be able to have the image text display as desired.
How I Applied it to the Site
The site name in the banner is an important part of the overall branding. The plain h1 text was all right, and I could probably style it a bit more to my needs, but I didn't feel like it blended to well with the rest of the semitransparent elements in the header. True it stood out a bit more, but I didn't want it to be too distracting from the main content of each page. So I created a semitransparent .png image and inserted it into the header. I felt that it was relevant enough to the content of the page that I would actually use it as an inserted image rather than a background image (just in case the viewer has background images turned off).
I then used the "text-indent" property to move the h1 text off the screen to the far left. In all honesty though, the alt property would take care of the screen reader issues and I could delete the h1 all together. Still it was good practice and may be something I will use to create custom bullets and other elements later on. Looking back, I decided that h1's are an important part of the logical structure of the document and should never be deleted. They are also used for many other purposes than just display, like search engines for example. I apologize for my rash comment earlier.