Offset a background image from the right using CSS

!! Outdated answer, since CSS3 brought this feature

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

Nope.

Popular workarounds include

  • setting a margin-right on the element instead
  • adding transparent pixels to the image itself and positioning it top right
  • or calculating the position using jQuery after the element's width is known.

The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.

Code:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

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.

Tags:

Css

Recent Posts