0

I have two images in one - width is 16px, height is 24px (so each images is 16x12 px). I would like to display first the upper image - I am doing it this way:

background: url('image.png') left 0px top 12px  no-repeat;

This works well. But now when I hover them menu item, I would like to hide the upper image and instead of that display the one beneath - and this is what I don't know how to set up. I've tried:

background: url('image.png') left 0px top 0px bottom 12px  no-repeat;

or

background: url('image.png') left 0px bottom 12px  no-repeat;

But without any success.

Every advice will be appreciated. Thanks

user984621
  • 46,344
  • 73
  • 224
  • 412

2 Answers2

0
.menuclass:hover {
     background: url('image.png')  0px -12px no-repeat;
}

to make this more clear , I normally type it as this

.menuClass:hover {
     background: url('image.png');
     background-position: 0 -12px;
     bacakground-repeat: no-repeat;
}

The coordinates of your sprite are as follows

0 0 is the top left.

-16px 0 is the top right

-16px -24px is the bottom right

0 -24px is the bottom left

So to get the second(bottom) image ,you just use 0 -16px

0 is saying your on the very left side of the sprite. And then -16px is saying you want to start at -16px from the top.

CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • But this is when are images next to each other, right? I have images underneath each other – user984621 Jan 14 '14 at 01:22
  • It's for either. Sprites can also have images that are side by side and above and below eachother and anything inbetween. – CRABOLO Jan 14 '14 at 01:31
0

To make a hover button work well like this, specifically size the element to contain a single image, and then only override background-position to offset the background mapping. It takes 2 parameters - an X offset and a Y offset. To push the background up you need to offset the Y value negatively to put it 'above' the image:

.menuClass:hover {
    background-position:0 -24px;
}

Sample provided here.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136