BENEFITS
When developing our sites redesign, I had a few goals in mind:
1. Make it as easy as possible to update
2. Make it search engine friendly
3. Make it as lightweight (file size) as possible
I’ll share a trick I used to accomplish this. It’s just a matter of putting all your similar looking images into one file. Here’s what one of the headers we needed looks like, this file saves as a 4k GIF with four colors.
Here’s what we ended up with. This file is also 4k and eliminates an extra 11 hits to the server. It loads once and prevents delays when browsing the site.
APPLICATION
Using it is easy. Say we want the categories header. The mark-up is no big deal, just
h2 class="categories" CATEGORIES
The CSS looks like this:
h2.categories {
height: 17px;
text-indent: -4000px;
background: url(../images/global/headers.gif) no-repeat left -34px;
}
There you go. A search engine friendly header made from one image. Another good use of background positioning can be seen here.