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.

possible duplicate of [How to set the background-position to an absolute distance, starting from right?](http://stackoverflow.com/questions/114501/how-to-set-the-background-position-to-an-absolute-distance-starting-from-right) — cHao, Oct 25 '11 at 11:05
might be helpful: http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail — jedierikb, Jun 02 '13 at 15:38
Possible duplicate of https://stackoverflow.com/questions/5142405/offset-a-background-image-from-the-right-using-css — Volker E., Mar 31 '15 at 21:03
No.... not mandatory. I wanted to improve readability. Sorry, did I do something wrong? — Mr. Hugo, Dec 06 '16 at 22:07

score 544 · Answer 1 · edited Jul 04 '17 at 13:22

544

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

edited Jul 04 '17 at 13:22

publicJorn

2,404
1
20
30

answered Jul 05 '12 at 15:29

Steven Mouret

5,730
1
18
21

"I do not know if it's valid"... it's not. The property in question has a standard order for the values. – Andrew Barber Oct 11 '12 at 15:21
14

It is valid according to CSS Backgrounds and Borders 3, which is already Candidate Recommendation (standard ready for implementation): http://www.w3.org/TR/css3-background/#the-background-position – Ilya Streltsyn Jul 02 '13 at 20:37
21

This should be the selected as the "Correct answer". According to MDN it's supported in IE9+ and all other browsers, which is great! https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Browser_compatibility – fregante Sep 27 '13 at 00:16
5

Not sure why this isn't selected as the answer? This does exactly what is asked for. – ChrisC Feb 24 '14 at 15:34
trying this in chrome dev tools, and it doesn't seem to be working (haven't really investigated thoroughly...) – 1nfiniti Apr 19 '15 at 20:21
@1nfiniti I've tried it on chrome dev tools and it works fine – Belakorr Apr 05 '16 at 13:00
For browser support check: http://caniuse.com/#feat=css-background-offsets – publicJorn Jul 03 '17 at 12:38

score 95 · Answer 2 · edited Sep 14 '14 at 04:56

95

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;

edited Sep 14 '14 at 04:56

Josh Crozier

233,099
56
391
304

answered Nov 06 '12 at 13:54

turda

959
6
2

2

This solutions works great in Safari, but does not work Chrome, Firefox or IE. – Andy Cook Jan 23 '13 at 22:13
4

Works in FF for me. And Chrome. And IE 8 and 9. Not 7 though. Useful hack! – ndtreviv Feb 08 '13 at 17:27
3

not ideal when your select box already as a border, otherwise would require another div surrounding the box – Miguel May 21 '14 at 16:11
background: url('/img.png') no-repeat right 10px center; this would work, i checked in firefox – Asad kamran Oct 04 '14 at 03:41

score 74 · Answer 3 · edited Feb 05 '15 at 11:13

74

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 =< IE8.

edited Feb 05 '15 at 11:13

Nick Schmidt

1,427
1
13
22

answered Jun 09 '13 at 02:23

Valentin E

1,363
11
11

5

This is a really powerful solution to a lot of design problems. take heed! – deweydb Jul 08 '13 at 20:06
3

so this doesn't actually seem to work even in the latest Chrome. When I inspect the element it actually says `background-position-x: calc(90%);` - i.e. it just subtracted 10% from 100% – Simon_Weaver Jul 02 '14 at 02:06
@ValentinE that works for me too :-) I definitely saw this converted to 90% though - and I had cut and pasted this directly from chrome. unless there was a strange bug in a dev build of chrome I'm not sure why – Simon_Weaver Jul 29 '14 at 19:06
3

@ValentinE duh! I figured it out. I'm using LESS for css and it has its own 'calc' function which takes precedence. For anyone else having this problem see : http://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc – Simon_Weaver Jul 31 '14 at 20:56
i see here http://caniuse.com/#feat=calc that this can actually crash IE9 - so if you're relying on it you'll definitely want to remember to test in IE9 – Simon_Weaver Jul 31 '14 at 21:01
side note: IE9 never was a modern browser :) , though if you are targeting Windows 7 people, you (rougly said)should test for IE9 too :) – jave.web Sep 06 '16 at 00:58

score 33 · Answer 4 · answered Jul 07 '10 at 17:34

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.

thanks for the tips! yeah, i do have it now set w/ % values, but it doesn't work so well in my case. the places this bg image should appear are on elements that vary a lot in size, so of course the offset amount to the right also varies a lot killing the consistency. anyway, i'll go with some hacky workaround i'm sure, but it's odd to me this isn't part of the spec. seems simple enough, you can do it from top or left, why not start bottom or right? anyway, maybe in css4 which will be properly supported in all major browsers around the time i'm dead ;) — Doug, Jul 07 '10 at 21:50
Keep in mind that you can also use the css :after selector to append a element with a background image to the right of another element. From there on, you could give it negative margins to place it where you want it to be. It's a pretty clean solution if you just want to append a non-repeating image to the right. — Nico, Jun 15 '13 at 13:54

score 24 · Answer 5 · answered Jan 16 '12 at 07:27

24

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.

answered Jan 16 '12 at 07:27

ahwebd

241
2
2

score 23 · Answer 6 · answered Aug 09 '13 at 19:13

23

You can do it in CSS3:

background-position: right 20px bottom 20px;

It works in Firefox, Chrome, IE9+

Source: MDN

answered Aug 09 '13 at 19:13

Adrian Macneil

13,017
5
57
70

score 8 · Answer 7 · edited Apr 15 '13 at 13:44

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.

For me this was the only solution that worked on all browsers. — Matthieu Napoli, May 31 '15 at 18:50

score 7 · Answer 8 · answered Jul 02 '13 at 20:18

7

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/

answered Jul 02 '13 at 20:18

Mroz

568
5
10

I like where you are going but it :after is really more of a psuedo element than a class. Just for clarification purposes – vmex151 Jul 02 '13 at 20:41
Right but does not work with old browsers like – Miguel May 21 '14 at 16:12
1

@Miguel There's no need to work there anymore ;-) Let the design look as ugly as possible for those who still use older versions than IE 8! (..as long as the website is still accessible..) – James Cazzetta Jan 17 '15 at 11:43

score 5 · Answer 9 · edited May 23 '17 at 12:34

5

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+ */

edited May 23 '17 at 12:34

Community

1
1

answered Aug 06 '13 at 14:52

stedman

395
5
5

-webkit-calc crashes my Safari with zero remorse. OSX 10.8.5 / Safari 6.0.5 – SquareCat Oct 05 '13 at 20:28

score 5 · Answer 10 · answered Jun 07 '19 at 08:48

5

If you want to specify only the x-axis, you can do the following:

background-position-x: right 100px;

answered Jun 07 '19 at 08:48

joshudev

136
3
3

This is not working in Chrome 81.0.4044.138. It is saying invalid property value. – Xandor May 14 '20 at 20:14
1

I was able to get it to work with: `background-position: right -100px center;` Note that if you omit the `y-position` it doesn't work right because it thinks that what the pixels are for. – Xandor May 14 '20 at 20:19

score 4 · Answer 11 · answered Nov 02 '12 at 15:25

4

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.

answered Nov 02 '12 at 15:25

RMM

49
1

score 4 · Answer 12 · answered Dec 12 '13 at 16:42

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

I remind you that setting % will also make it align depending on the length of the container, which could be messy if you have larger containers — Miguel, May 21 '14 at 15:44

score 2 · Answer 13 · edited Jan 30 '13 at 16:33

2

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.

edited Jan 30 '13 at 16:33

jocull

20,008
22
105
149

answered Jan 23 '13 at 22:39

Andy Cook

147
3

got it backwards.. its horizontal then vertical – Ray Jan 27 '13 at 20:51

score 2 · Answer 14 · answered Jul 11 '13 at 07:21

2

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.

answered Jul 11 '13 at 07:21

Ronny Sherer

8,349
1
22
9

score 2 · Answer 15 · answered May 31 '14 at 09:27

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/

score 1 · Answer 16 · answered May 17 '12 at 17:45

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!

score 1 · Answer 17 · answered Mar 11 '13 at 13:41

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

<style>
    .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
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

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.

score 1 · Answer 18 · answered Jun 22 '13 at 20:31

1

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%;

answered Jun 22 '13 at 20:31

Broncha

3,794
1
24
34

This one worked for me quite nicely so long as you don't need exact pixels from the right but a more fluid layout. – Jeff S. Jul 11 '13 at 07:22

score 1 · Answer 19 · edited Nov 22 '22 at 22:03

1

Better for all

background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;

edited Nov 22 '22 at 22:03

mfluehr

2,832
2
23
31

answered Feb 13 '14 at 08:04

azhar_SE_nextbridge

304
3
19

score 0 · Answer 20 · answered Oct 04 '12 at 19:33

0

Solution for negative values. Adjust the padding-right to move the image.

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

answered Oct 04 '12 at 19:33

Greg Tatum

1,122
10
12

score -1 · Answer 21 · answered Jul 05 '13 at 09:21

-1

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;

answered Jul 05 '13 at 09:21

Deedee

1

2

this is not valid, chrome was just being nice to you. – RozzA Nov 07 '13 at 21:52

Position a CSS background image x pixels from the right?

21 Answers21

Linked

Related