Dynamic Image Color Using CSS and PNG Transparency

closeThis post was published 6 years 9 months 14 days ago, which is pretty much forever ago in internet time. As such, some of what's discussed here may no longer work as described.

I originally wrote this post on April 15, 2009 on my personal blog. It has been pretty popular, so I thought I should repost it here.

Last week at work, I was given the task of changing the color scheme of our CMS for a client. It isn’t something we normally do, but the client requested it, and it wasn’t too difficult to do, so we did it.

Dynamic image color would have helped a lot here.

Changing the color of all the images took longer than it needed to. Dynamic image color would have helped a lot here.

I say that it “wasn’t too difficult,” because there was a small amount of difficulty involved. Actually, it was more an inconvenience than a difficulty. While it was easy enough to change the color of the links and any colored text, all of those images you see in the screenshot to the right (which I edited to show the before-and-after colors) required someone to make the changes manually. It wasn’t hard, just time-consuming.

That got me thinking about how to quickly change the colors of images, which lead me to ponder, “wouldn’t it be great if I could set a dynamic image color using CSS?” Not only would it be great, it’s entirely possible and very easy to do.

Easy Dynamic Image Color

As a proof of concept, I made this page. Take a look at the code and you should get a pretty good sense of what’s going on (unless you’re using IE6, in which case, update your browser). Starting from the top left and moving to the right, and then down, here’s what each image shows:

  1. This is the original 24-bit PNG (note that I added the border around the images with CSS) with alpha transparency. To help illustrate the transparent area in the image, I added Photoshop’s default transparent background texture. Each of the smiley faces on the page uses this exact same PNG, which means that the browser only has to download the image once. This means fewer HTTP requests and fewer images to download, which decreases load time.
  2. The original transparent PNG with a solid red color behind it. This gives you a better sense of the white gradient at the top-left of the smiley face.
  3. The same as #2, but with a blue background. Again, it’s important to note that these are exactly the same image and the browser fills in the colors.
  4. Numbers 4 through 6 all demonstrate the same basic principle, but each in a slightly different way. This image shows that you can use an image as a background, not just colors.
  5. In this case, the image is my webcam, which changes every 60 seconds (Update: The webcam is no longer online, but the image is still there.). Also, I used CSS to position the background.
  6. Here I used an animated GIF.

I do want to point out that I’m not breaking any new ground here. I’ve been using this same basic technique on my website since February of 2007 to add rounded corners on my webcam images. I don’t know why it didn’t occur to me then, but I’ve shown my test page to a few people who all had big, excited reactions.

The implications of what you can do with this sort of technology are vast, and in May of 2007, David Hellsing wrote a fantastic post over on Dave’s Kitchen about how you can take advantage of the effect. I won’t go into details here about what David came up with, but check it out because it is brilliant.

Bringing this all back to the CMS at work, our icons are single-color images (that is, a single color besides white and black). If the colored areas were transparent and the backgrounds of all the images set to a solid color using CSS, we could easily have changed the color of every one of those images by changing a single value in the CSS. In fact, with a little planning, we could change every single color (links, colored text, message bar, and icons) by changing one value in our CSS code.

No wonder people are getting so excited about this.

4 comments to Dynamic Image Color Using CSS and PNG Transparency

  • Jimmy  says:

    Did you test that images as PNG 8 vs PNG 24? IE6 actually renders PNG 8 transparency without nasty hacks.

    • Thomas  says:

      I didn't, but it would work. In fact, it would work with GIF images as well.

      From what I remember reading, you can use Fireworks to create 8-bit PNG images that have alpha transparency that renders properly in IE6. But then, if people are still using IE6, they're probably used to the Internet looking like crap.

  • Kevin  says:

    Why does the background stop in the circle and not extend out to the rectangle bounding the png?

    I cannot get this to work, my backgrounds always extend out to the boundry.

    Please help!

    • Thomas  says:

      The background doesn't extend past the circle because only the inside of the circle is transparent. The area outside of the circle is white to match the background color of the rest of the page.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>