Making A CSS Image Rollover Using Background Position

/ CSS / by Paul Robinson / 6 Comments
This post was published back on April 24, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

As explained in the post intro the oldest way (that I remember) to create an image rollover is using good old Javascript. The problem with that is if you don’t use some fairly complicated JS to preload the images your user may experience a delay (depending on their connection) while the rollover image is loaded. Using CSS you can now create rollovers that do not experience that delay.

This method is exceptionally easy, but is something that seems to remain elusive to those new to using CSS. That is why I’m writing this tutorial. We will use the rollover on Celeb O Rama Wallpapers as an example. If you visit you will notice the rollover is very responsive, so let’s look at how it’s made.

Preparing The Images

This is probably the trickiest part. You will need an photo/graphics manipulation application such as Photoshop, Fireworks, or GIMP anything but MS Paint should be fine. This is the tricky part. Create a canvas double the size of one of your images, and place a horizontal guide across the center of your image. You now need to place both images on the canvas, inactive state on top & active state on the bottom. You must make sure they are perfectly aligned too. To explain that better; If your top image is 5 pixels from the top, and 2 pixels from the left then your bottom image must be 5 pixels from your center guide and 2 pixels from the left. Save it out & your ready.


The HTML is very simple, you just need a single element such as a div with an a inside like this:

The CSS is the key to making the rollover work & because both states (inactive & active) are on the same image, they will both load at the same time and it will eliminate the loading delay you could get on the old javascript rollovers. Here we go:

It’s that simple. The first rule adds the image as a background & sets the position to zero which is basically the same as using top left. If you created the image correctly this will show the inactive state first. You also have to add in the width & height of 1 image, not both images together, just 1 image. You also need to set display to block. This is because an a is an inline element & cannot be given a height or width without first changing it to a block element.

The second part uses the a hover to allow the rollover to work in all current browsers (yes, even IE6). You just move the position of the background image by the height you set in the .rollover a css rule. This will then show the active state on hover.

You’re Done

That’s it you’re all done. If you see any form of jumping it means either your position is wrong in the CSS, or if you are sure that is correct, it is that the images were not correctly aligned when saving them. I’ve been creating these rollovers quite a while & you generally never, unless you’re very lucky, get it right the first time.

You can see an example over at Celeb O Rama Wallpapers. As always, any questions or problems let me know & I’ll help as much as I can. 😉


Author’s gravatar

what if i wanted to add an image such as arrow to the right? I only added “top right” to background. but it didn’t work in a:hover. How do I fix it?

I tried adding “background: top right” to a:hover but the image just disappear….

Author’s gravatar author

Hi Kristina,

The same principle applies to all CSS based image rollovers. As mentioned in the tutorial it is best to avoid using position keywords ‘top left’ etc, and instead use the pixel positions. You can easily get them via Photoshop or GIMP.

One thing to make sure is that you have display: block in your CSS for your a. Without it the effect generally doesn’t work too well, if at all.

Author’s gravatar

pixel position? like top: 0; left: 30px;? Here’s my code:


Author’s gravatar author


WordPress stripped some of your HTML so I guessed it as best I could, hope it is correct.

You code looks okay, except for the top and left in your a. The pixel positions I meant are on the end of the background property. Generally your non hovered a would use background-position: 0 0; since you should have your normal state positioned first on your image.

Does that make sense?

Author’s gravatar

Thanks! It works!

Your guess is pretty close except that the class “arrow” is in h1 section inside div section with id “styles”.

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more