Posicionamiento CSS - ¿Múltiples propiedades de posición de fondo?

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.

preguntado el 27 de agosto de 11 a las 22:08

I can solve this myself with jQuery. If there is a simpler way of doing it than using jQuery, please do let me know! -

2 Respuestas

Aparentemente,

[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.

Respondido 28 ago 11, 02:08

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. - Phillip

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.

Respondido 28 ago 11, 03:08

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). - Phillip

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? - slang

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. - Phillip

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.