Aligning background image to right

Question

http://jsfiddle.net/Zx836/

In the second box, notice how the arrow is in the same place. How can I make it flow with the div?

Using scroll right center in the background property works but I want to keep some padding right.

I'm also trying to avoid using 2 divs or the tag. Is this possible just via the .box div?

Answer 1

.right-align-background {
    background-position: center right;
}

http://jsfiddle.net/Zx836/1/

Answer 2

You could also use background-origin: content-box; if your you would like your background to line up with the padding you set on the element.

Something like this:

input.error {
 background: no-repeat;
 background-image: url('../images/field-error.png');
 background-position: right center;
 background-origin: content-box;
 padding-right: 5px;
}