2

Is there a way to set multiple background-position properties for a single element? Depending on the state of a link (pressed/hover/default), I need to both change the X and Y values of the image being displayed.

I'd like to have the Y values static in my CSS files, while the X position needs to change per each element in my nav bar (which the links go in).

Is there a way to do this? Looking online, I haven't found a way to set just the top or just the left parameter for background-position.

Improve this question
1
  • I can solve this myself with jQuery. If there is a simpler way of doing it than using jQuery, please do let me know! Commented Aug 27, 2011 at 22:59

2 Answers 2

Reset to default
1

Apparently,

[background-position] accepts one or two length values, percentages, or keywords.

If only one value is specified for background-position, the second value is assumed to be center. Where two values are used, and at least one is not a keyword, the first value represents the horizontal position, and the second represents the vertical position.

You will most likely have to rely on JavaScript to preserve those Y values.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

My problem is that setting background-position again completely rewrites the older one. I need to be able to set this twice (because the X position will be changing dynamically). I can do this with jQuery I suppose.
0

you can use this CSS to change the background image position for a element depending on its state (regular, hover, or active)... assuming you are using a sprite for your background:

#NavElement { background-image:url(../img/button.png); background-repeat:no-repeat; background-position:top center; } #NavElement:hover { background-position: center; /* center is assumed as the second value */ } #NavElement:active { background-position:bottom center; }

Also, you can specify the position in px rather than bottom, top, or center.

Improve this answer

3 Comments

Only problem with that I have to set a new X position from within the code. It'll be specific to the particular link selected. It would overwrite the current background-position setting (thus, my problem).
you could use js to set the background position: object.style.backgroundPosition="Xpx, Ypx" ... however I don't think that I fully understand your question, could you post your code?
I did use jQuery to get what I want. I needed to access different X/Y coordinates at different times and dynamically. Setting a single CSS class wouldn't help, so I have to use jQuery. What would have helped is background-position-x or background-position-y - it's just those two settings are not standard. I need to be able to alter one coordinate WITHOUT altering the other, but when you try to use background-position then it will ignore any other previous settings.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.