Why use background images?

In developing web sites I try to make them as user friendly and as search engine friendly as I can. Here is a tip to increase both search engine friendliness and user friendliness. Most web sites are designed with images for the header which will load first. Search engines do not recognize images and the alt atribute has a low priority in ranking.

You want a nice image header and a friendly site, so here is what to do?

Place the header in a <div> and load the image as a background image, i.e.

If you have your text in a fancy font in the image and don't want the h1 get "in the way", you can set line-height: 1px; and the h1 will not show. This is an excellent "image substitution" which is SE-friendly and accessible as well. AND it looks good.

Let me add that this technique makes your site a lot more easy to access with mobile devices, because those devices ignore background-images. If you have the image up in the content, large images will fill up the small cache of the mobile devices and the browser will crash/stop working/whatever.

Re: Why use background images?

Originally Posted by faglork

If you have your text in a fancy font in the image and don't want the h1 get "in the way", you can set line-height: 1px; and the h1 will not show. This is an excellent "image substitution" which is SE-friendly and accessible as well. AND it looks good.

There are ways in to upload your fancy font to the server and can be used in the website so everyone gets the benefit of the font. When I get a chance I will write a "tip" on how to do it, or someone might beat me to it.

From a Marketing perspective, I like the effect of the background image the way I CSS'd it on my Site. The Eagle is constantly with you, like a guide in the background, and even stays by itself, when navigating between pages. I would suppose that any background image has that residual "Branding" benefit that can be tapped, if desired?

another reason for using background images is so that the only images not in the css files are then "active" or clickable, it also means that you reduce the need for alt tags (although you may not want that for sec purposes).

The thing with the hidden H1 tag - why not use it as good accessibility practice? Hide it from most viewers but use it as the title for the page for disabled users or those without css...