css

Offset a background image from the right using CSS

Is there a way to position a background image a certain number of pixels from the right of its element?

For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:

#myElement {
    background-position: 10px 0;
}
Solution

  • I found this CSS3 feature helpful:

    /* to position the element 10px from the right */
background-position: right 10px top;

    As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

    See Can I use for details on the supported browsers.

    Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

    Update:

    This feature is now supported in all major browsers, including mobile browsers.