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!
Problem courtesy of: Syren
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.
Solution courtesy of: Brian Nickel