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

User · Answer

use center right as the position then add a transparent border to offset it

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt  6    background-position  -webkit-calc 100  - 10px  center     Sf 6    background-position  right 10px center     Cr 25   FF 13   IE 9   Op 10 5

User · Answer

background-position  calc 100  - 8px

User · 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

User · Answer

yes  well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use   background-position  100  0px

User · Answer

This will work on most modern browsers   apart from IE  browser support   Even though that page lists    IE9 as supported  my tests didn t agree with that   You can use the calc   css3 property like so    class name       background-position  calc 100  - 10px  50       For me this is the cleanest and most logical way to achieve a margin to the right  I also use a fallback of using border-right  10px solid transparent  for IE

User · Answer

Ok If I understand what your asking you would do this   You have your DIV container called  main-container and  my-element that is within it  Use this to get you started    main-container      position relative      To make the element absolute - floats above all else within the parent container do this     my-element     position absolute    top 0    right 10px       To make the element apart of elements  something tangible that affects the position of other elements on the same level within the parent then do this     my-element     float right    margin-right 10px      By the way  it better practice to use classes if you referencing a lower level element within a page  I assume you are hence my name change above

User · Answer

The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21  apparently IE9 partly supports them  but I ve not tested it myself   In addition to the Chrome issue that  MattyF referenced there s a more succinct summary here  http   code google com p chromium issues detail id 95085

User · Answer

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

User · Answer

If you have a fixed width element and know the width of your background image  you can simply set the background-position to   the element s width - the image s width - the gap you want on the right   For example   with a 100px-wide element and a 300px-wide image  to get a gap of 10px on the right  you set it to 100-300-10 -210px     myElement     background url my image jpg  no-repeat -210px top    width 100px      And you get the rightmost 80 pixels of your image on the left of your element  and a gap of 20px on the right   I know it can sound stupid but sometimes it saves the time    I use that much in a vertical manner  gap at bottom  for navigation links with text below image   Not sure it applies to your case though

User · Answer

A simple but dirty trick is to simply add the offset you want to the image you are using as background  it s not maintainable  but it gets the job done

User · Answer

my problem was I needed the background image to stay the same distance from the right border when the window is resized i e  for tablet   mobile etc My fix is to use a percenatge like so   background-position  98  6px    and it sticks in place

User · Answer

If you have proportioned elements  you could use    valid       background-position  98  center      half  valid       background-position  96  center      In this example   valid would be the class with the picture and  half would be a row with half the size of the standard one   Dirty  but works as a charm and it s reasonably manageable

User · Answer

If you would like to use this for adding arrows other icons to a button for example then you could use css pseudo-elements   If it s really a background-image for the whole button  I tend to incorporate the spacing into the image  and just use   background-position  right 0    But if I have to add for example a designed arrow to a button  I tend to have this html    lt a href   url   class  read-more  gt Read more lt  a gt    And tend to do the following with CSS    read-more      position  relative      padding  6px 15px 6px 35px   to create space on the right     font-size  13px      font-family  Arial      read-more after      content          display  block      width  10px      height  15px      background-image  url     images btn-white-arrow-right png        position  absolute      right  12px      top  10px      By using the  after selector  I add a element using CSS just to contain this small icon  You could do the same by just adding a span or  lt i gt  element inside the a-element  But I think this is a cleaner way of adding icons to buttons and it is cross-browser supported   you can check out the fiddle here  http   codepen io anon pen PNzYzZ

[css] Offset a background image from the right using CSS

Examples related to css