Advertisement
Advertisement


Offset a background image from the right using CSS


Question

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;
}
2011/02/28
1
445
2/28/2011 1:10:24 PM

Accepted Answer

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.

2019/03/18
795
3/18/2019 5:23:37 PM

!! 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.
2015/06/21

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;
}
2011/10/17

Outdated answer: It is now implemented in major browsers, see the other answers to this question.

CSS3 has modified the specification of background-position so that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.

http://www.w3.org/TR/css3-background/#the-background-position See example 12.

background-position: right 3em bottom 10px;
2017/06/10

As proposed here, this is a pretty cross browser solution that works perfectly:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.

2017/05/23

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+ */
2017/05/23

Source: https://stackoverflow.com/questions/5142405
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]