Background-position in css

Question

Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?

I think you are all understand this

Answer 1

If I get your question right, it's possible, but you will have to have 6 different HTML elements to contain the background image at 6 different positions.

Answer 2

You can (at the moment - cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:

<a class="img" id="thatoneimg" href="#"></a>

And then in the css:

a.img {
  width: 100px;
  height: 100px;
}
a#thatoneimg {
  backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
  backround-image: url(movingimg.gif);
}

That should work cross browser. You need the a-tag for it to work in IE.

Edit: As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.

Answer 3

If I understood you correctly, you want to continously change the position of your background image while you hover over one button.

If that's right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover