I've been toiling with this for a couple days now and can't seem to figure out why it doesn't work.

I attached the image I am using. I'm copying this affect from a tutorial on a site I found.

The effect makes it look as if the color of the image has changed color, but really, the image is just repositioned.

Thanks for any ideas.

This is the code:

<style type="text/css">
    .myImage { 
             width: 100px; 
             height: 100px; 
             background: url('/path/to/myImage.png') no-repeat;                   
             background-position: 0 -100px; }

.myImage:hover { background-position: 0 0; }


      <div class="myImage">&nbsp;</div>



I forgot to add that I'm using Firefox/IE and neither work so its not a browser issue.

I am also using the Firefox developer tool bar and when I click
CSS-> view style information, the hover css rule doesn't even show up. So for some reason, this one rule is not registering with the browser?

Thanks in advance :)


This technique is generally called a "sprite".

The pseudo class :hover only applies to clickable links, not divs, therefore try : <a class="myImage" href="#" >My link</a> If you don't want text in the link, then use &nbsp; .

If you want text in the link, then you will probably want it v & h center-aligned. Try line-height:100px; text-align:center; text-decoration:none; . You may also want text-decoration:none; in the :hover directives as underline will tend to distract from the background rollover effect.


Hi Airshow,

Thanks for the response-I think I figured it out though-it was the doctype. I was using HTML but whatever the tutorial was doing required XHTML and when I slowly started removing pieces of the markup from the tutorials web site, the only thing that was left was the doctype declaration at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Problem solved and thank you for the help!

just for anyone who's interested, this is the site:



So it works on a raw div!!!


what is this code doing on your site?

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5789165-1");

It is rising error on my firefox v3.5.2

what is this code doing on your site?

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5789165-1");

It is rising error on my firefox v3.5.2

I don't know where that code came from. What site are you talking about?

The link to your blog page you just provided:

But there is more...

That's NOT my blog.lol. I just found a couple good tutorials on there that I wanted to share.

I'm not sure about the errors though...I've no idea. I'm using firefox v3.5.2 as well and I don't get any errors.

Maybe it's cookie or security settings on your browser or something?

Sorry my missunderstanding,
anyway, its an adware and a spyware blocked from my security. :)

Just curious, but how do you know that's adware? I mean, what about the script tells you that? I'm asking because I really don't know, I'm not saying it isn't add-ware.

I'm surprised though because it is the guys personal web-site where he has his web-development portfolio.

I'm curious about the script you said is adware.


Problem solved and thank you for the help!

I just found time to do some testing.

FF 3.0.13: OK
Opera 9.01 : OK
IE6 : No go - div:hover not supported.

If you want to include IE6, I think you will need to use an <a> tag as per my post #3.

Last time I looked at browser stats (on a particular site), IE6 was about 15% of all users. Maybe a few percent less now but I would guess still quite significant.


commented: Very informative and helpful. +1

Thanks Airshow, I forgot that I was testing on IE8 which has support for more standards I think.

15% is a big percent. I'm going to try your suggestion of using the anchor tag tomorrow.

Till next time.