How can I move a background straight up?

I’m moving from rollover images to a CSS Sprite. The image is a single banner and the hover over area is beside it. I’ve attached the sprite to show you and the live site I’m trying to fix this on is www.canspecinspection.com

So far I’ve tried:

background-position: -54px 0;

but this doesn’t work. The problem is the hover over grabs the very start of the background. How can I go about just moving the background straight up 54px without shifting it back to the beginning?

First of all, background-position is “left top” not “top left” like you are probably used to.

I didn’t go to the site but you are moving the image 54px left not 54px up.

My mistake, I did have it

background-position: 0 -54px;

so that’s not the problem

I think I’m missing something :). The CSS sprite is working perfectly, I don’t understand the different effect you are trying to achieve. I’m a bit of a dunce when trying to figure out what people want on here lol :).

Take a look at the live site. You’ll see it works fine for the Home button, but not the other buttons because it is going to the very far left of the sprite

Of course not lol. Why would it go to anywehre else other then the left side of the image by default? What part of the image do you wanna select and show? Use background-position to move it to the particular place to show it.

You would need to set up rules for each menu item and shift the horizontal position to match.

e.g.


#topMenu li.page-item-10 a:hover {background: url('images/menu.gif') repeat-x -125px -54px;}

The negative horizontal position is increased as you move along the menu to reveal the pertinent part.

Actually as you have all items the same width you could just set 3 rules up. One for each end and one common one for the middle.

That’s what I figured I had to do. I was trying to find another way because in WordPress they are given random values like page-item-8 so I can’t really call the one in the front or last because that class name may change.

Can’t you just add your own classes then and ignore the wordpress ones or aren’t you allowed to do this in wordpress? (I’m not a wordpress user)