CSS: change image background colour

Tweet

The trick we are going to see today is very basic, but it has many possible implications. It depends on what you are really trying to do, however changing the background colour of an image can be very handy when we want to highlight a picture, or even sections of an image.
Let's see how it is done with just a line of CSS.

The image

The image we are going to highlight needs to have a transparent background. A gif could be what we need.
The only thing we should consider when choosing the right image is that the transparent part of it will be the part changing colour. Thus, if we want to highlight only a specific part of it, we should make only that part transparent. For example, we could make a star sparkle when the mouse gets over it; or we could emulate a shining effect on a polished metal button.
Then, we can create our HTML part quite simply:

<div class="bkimg">
  <a href="#">
     <img src="images/test.gif" border="0">
  </a>
</div>

In the above snippet, test.gif is our image.

The CSS

The CSS part of the example is very simple:

.bkimg a img:hover {
    background-color: #CCCCCC;
}

When the mouse gets over the image, the rule will be applied and the background colour will change... simple as that.

Now... As you can see this is no magic trick. The point here is that we can really make things a little bit more interesting when applying the above logic to specific images, where what matters is the transparent section of the image itself.

Only your imagination is the limit!