Another way to reduce the number of images used in your CSS

👉 Whoa! Please note that this post is 17 years old. The views expressed within might have become outdated.

I did some fairly obvious pondering today. In a website I'm currently working on two images are used for some pagination links. Simple images representing a white arrow on a colored background.

There's one image for the regular link state, and one image for the link's hover state, which is the same except for the differently colored background.

It just hit me I could do this with only one image.

These are two images that work in the same way:

The image for a regular link The image for a hovered linkThe CSS for the link would be something like this:

a {
width: 100px;
height: 100px;
display: block;
}
a { background: url(pic1-normal.jpg) no-repeat; }
a:hover { background: url(pic1-hover.jpg) no-repeat; }

But, I can achieve the exact same effect using only one image, let’s say a PNG, with a transparent background, and use CSS like this:

a {
width: 100px;
height: 100px;
display: block;
}
a { background: #000 url(pic1.png) no-repeat; }
a:hover { background-color: #f00; }

Like I said; this is all very obvious and nothing new, but sometimes it’s good to read a reminder. Check out this page to see a comparison.