CODEWITHSUNDEEP
css
Phillip
Phillip

Reputation: 1570

CSS Positioning - Multiple Background Position Properties?

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.

Upvotes: 2

Views: 1302

Answers (2)

slang
slang

Reputation: 640

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.

Upvotes: 0

Bryan Menard
Bryan Menard

Reputation: 13384

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.

Upvotes: 1

Related Questions