Position a CSS background image x pixels from the right?

The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

If you want to specify only the x-axis, you can do the following:

background-position-x: right 100px;

Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.

I was trying to do a similar task to get a dropdown arrow always on the right side of the table header and came up with this which seemed to work in Chrome and Firefox, but safari was telling me it was an invalid property.

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

After doing a bit of messing around in the inspector, I came up with this cross-browser solution that works in IE8+, Chrome, Firefox, and Safari, as well as responsive designs.

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

Here is a codepen of how it looks and works. Codepen is written with SCSS - http://cdpn.io/xqGbk

You can position your background image in an editor to be x pixels from the right side.

background: url(images_url) no-repeat right top;

The background image will be positioned in top right, but will appear to be x pixels from the right.

Works for all real browsers (and for IE9+):

background-position: right 10px top 10px;

I use it to RTL WordPress themes. See example: temporary website or the real website will be up soon. Look at the icons at the big DIVs right corners.

Another solution I haven't seen mentioned is to use pseudo elements and I do believe this solution will work with any CSS 2.1 compliant browser (≥ IE8,≥ Safari 2, ...) and it should also be responsive :

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;... Test it for your self here : http://jsfiddle.net/yHucT/

If the container has a fixed height: Tweek the percentages (background-position) until it fits correctly.

If the container has a dynamic height: If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom.

I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. In my case, my background is an arrow down that would replace the basic drop down icon. In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side.

Hope this helps!

Tweaking percentages from the left is a little brittle for my liking. When I need something like this I tend to add my container styling to a wrapper element and then apply the background on the inner element with background-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

The .content-breakout class is optional and will allow your content to eat into the padding if required (negative margin values should match the corresponding values in the wrapper padding). It's a little verbose, but works reliably without having to be concerned about the relative positioning of the image compared to its width and height.

Its been loong since this question has been asked, but I just ran into this problem and I got it by doing :

background-position:95% 50%;

Solution for negative values. Adjust the padding-right to move the image.

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

This works in Chrome 27, i don't know if it's valid or not or what other browswers do with it. I was surprised about this.

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Better for all background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;