CSS: Difficulty with Background Position Different Angular Offsets

Question

I am having problems with buttons using multiple backgrounds. I know that I can use: before and: after, but I would like to find out if it is possible.

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

In this, I showed that in the end I want it to look. In this 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 intelligently expand to be used for other buttons and for translation, I want to use this:

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

But that does not work. According to the specification, it should, so I'm not sure what I'm doing wrong. Any ideas? Thanks!

Answer 1

I tried to do the same. Unfortunately, there is currently no support for right 5px bottom 5px .

What I finished doing is take my image and actually add transparent pixels to the right and bottom of the image to get it in the right position. This is not very good, but it works fine in any browser that supports multiple background images.

For a complete list of features supported by both browsers, see the Standardista CSS3 Background Properties Page . In the background position, it displays a 4-digit offset, which is only supported by IE9 + and Opera 11+. This is a real shame as it is the only CSS3 background feature that is not supported in all directions.