CSS: Difficulty with background-position different corner offsets

Question

I'm having some troubles making buttons using multiple backgrounds. I know I can use :before and :after but I'd like to figure this out if possible.

Here is the Jsfiddle http://jsfiddle.net/syren/qerUT/1/

In that, I've shown what I ultimately want it to look like. In that one, I used

background-position: left top, 97% 90%;

Just to show what I want it to look like. Since I want it to be able to expand gracefully to use for other buttons and for translation, I want to use this:

background-position: left top, right 5px bottom 5px;

But this isn't working. According to the spec it should, so I'm not sure what I'm doing wrong. Any ideas? Thanks!

Answer 1

I have tried doing the exact same thing. Unfortunately, there is no real support for right 5px bottom 5px at this time.

What I ended up doing was taking my image and actually adding transparent pixels on the right and bottom of the image to get it into the position I wanted. It isn't pretty but it works perfectly in any browser that supports multiple background images.

For a full list of what background features are supported by each browser, visit tne Standardista CSS3 Background Properties page. Under background-position, it lists 4-value offset as only being supported by IE9+ and Opera 11+. Its a real shame since this is the one CSS3 background feature that isn't supported across the board.