Position a CSS background image x pixels from the right

Question

I think the answer is no  but can you position a background image with CSS  so that it is a fixed amount of pixels away from the right   If I set background-position values of x and y  it seems those only give fixed pixel adjustments from the left and top respectively

User · Answer

If you want to specify only the x-axis  you can do the following   background-position-x  right 100px

User · Answer

Better for all background  url     images bg-menu-dropdown-top png   left 20px top no-repeat  important

User · Answer

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

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

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

User · Answer

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

User · Answer

If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class  after to do practicaly anything with the background    container after      content         position absolute      right 20px      background url http   lorempixel com 400 200  no-repeat right bottom      this css will put background to bottom right corner of   container  element with 20px space on the right side   See this fiddle for example http   jsfiddle net h6K9z 226

User · Answer

It is possible to use attribute border as length from the right  background  url   img png   no-repeat right center  border-right  10px solid transparent

User · Answer

Solution for negative values  Adjust the padding-right to move the image    lt div style  overflow hidden   gt        lt div style  width 100  background url images jpg  top right  padding-right 50px   gt        lt  div gt    lt  div gt

User · Answer

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

User · Answer

background-position  right 30px center    It works in most browsers  See  http   caniuse com  feat css-background-offsets for full list   More information  http   www w3 org TR css3-background  the-background-position

User · Answer

You can do it in CSS3   background-position  right 20px bottom 20px    It works in Firefox  Chrome  IE9   Source  MDN

User · Answer

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

User · Answer

Image workaround with transparent pixels on the right to serve as right margin   The image workaround for the same is to create a PNG or GIF image  image file formats that support transparency  which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of  eg  5px  10px  etc    This works well consistently across fixed widths as well as widths in percentages  Practically a good solution for accordion headers having a plus minus or up down arrow image on the header s right   Downside  Unfortunately  you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color  with out a gradient vignette   mostly white black etc

User · Answer

There is one way but it s not supported on every browser  see coverage here   element     background-position   calc 100  - 10px  0      It works in every modern browser  but it is possible that IE9 is crashing  Also no coverage for   lt  IE8

User · Answer

Try this    myelement     background-position  100  50     margin-right  5px      Note though that the code above will move the whole element  not the background image only  5px from the right  This might be ok for your case

User · Answer

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

User · Answer

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   lt style gt       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        lt  style gt    lt div class  wrapper  gt       lt div class  bg-img  gt           lt div class  content-breakout  gt  lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

As far as I know  the CSS specification does not provide for exactly what you re asking  outside of CSS expressions  of course  Working off the assumption that you don t want to use expressions or Javascript  I see three hackish solutions    Make sure your background image matches the size of the container  at least in width  and set background-repeat  repeat or repeat-x if only the width is equalized  Then  having something appear x pixels from the right is as simple as background-position  -5px 0px  Using percentages for background-position exhibits special behaviour that is better seen than described here  Give it a shot  Essentially  background-position  90  50  will make the right edge of the background image line up 10  away from the right edge of the container  Create a div containing the image  Explicitly set the position of the containing element position  relative if not already set  Set the image container to position  absolute  right  10px  top  10px   obviously adjusting the final two as you see fit  Place the image div container into the containing element

User · Answer

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

[css] Position a CSS background image x pixels from the right?

Examples related to css