6

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!

Syren
  • 1,961
  • 2
  • 15
  • 19

1 Answers1

4

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.

Brian Nickel
  • 26,890
  • 5
  • 80
  • 110
  • Thanks, thats too bad. I couldn't find any documentation on support, have you seen any? – Syren Nov 14 '11 at 09:01
  • Added a link to my answer. In general, I like to use http://caniuse.com/ to get a general picture and then follow the links for more details. – Brian Nickel Nov 14 '11 at 14:29