CSS background-position combined types

CSS3 background customize is a powerful tool, but it lacks one feature for me. I can set background-position in few ways, but I need some combinations of those. For example, there is a dynamically re-sized div, and I need a right-center oriented image which is 15px开发者_Go百科 from the right border. I can not find any way to handle this. I could use two fixes, none of them are elegant.

1. I leave a blank 15px area on the picure's right side.

2. I use this: background-position: 97% 50%

But, in the second case, if the div is re-sized, the calculated right margin will be incorrect. Or, I use a standard image instead of bg-image, but I try to avoid this.

So, is there any solution?

Thanks!

CSS3 extends background-position to allow for that. For example, you can do:

background-position: right 15px bottom 15px;

Unfortunately, only Opera currently supports this.

However, the common reason you want that, is that you have a 15px padding. If that's the case, you can just do:

background-origin: content-box;
background-position: right bottom;

which is supported by every CSS3 browser.