Aligning background image to right

http://jsfiddle.net/Zx836/

In the second box, notice how the arrow is in the same place. Ho开发者_JAVA技巧w 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?

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

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

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;
}

How about adding the image using :after instead?

.box {
    background: #a6cf83;
    float:left;
    color:#333;
    font-weight:bold;
    padding:8px;
}

.box:after {
    content: url(http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/new-go-next.png);
}

Calc() has 95% browser support in the US now (September, 2017), and provides an elegant solution to this problem.

background-position: calc(100% - 24px) center;

If you need padding on the right, I think you might have to go with percentages :

background-position:95% 50%;

will do quite nicely if your elements are of similar width.