How to set fixed background position from right side in css?

Question

In this case

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
    border-bottom: 1px solid #D4E8EB}

I want 20px space in right side before to background image and I can't give margin on li because border should touch the edges.

So I need to set 20px but it takes 20px from left side not right side.

li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
        border-bottom: 1px solid #D4E8EB}

can't think of a way other than using js to calculate the width of the element, subtracting "20 + width of background image", and pushing the background image that pixels to the right from the left. not very elegant... not at all. — Ege Özcan, Apr 20 '11 at 14:09
Maybe you should choose one of the answers if the question has been answered satisfactorily. — Knelis, Aug 25 '14 at 12:45

Nizam Kazi · Answer 1 · 2015-08-02T13:07:31.423

83

in your css mention position right then "spacing value(50px)" then other position(center/top)

li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}

Older Browser and IE8 and old version of IE does not support this code. Latest updated browsers has no conflicts with this method and hopefully future updates will support it too.

If you are using modern browser, try background-position: calc(100% - 50px) center; as suggested in another answer too. calc has long way to go as it is logically and mathematically capable to produce much accurate result.

edited Aug 02 '15 at 13:07

answered Oct 01 '13 at 13:17

Nizam Kazi

1,900
1
20
26

6

That's pretty awesome. I had no idea you could compound values like that. – Kyle Apr 03 '14 at 14:13
1

This doesn't work in Windows Safari. – Michael J. Calkins Nov 25 '14 at 21:37
This is awesome, why is this not a documented feature? – zykadelic Mar 05 '15 at 15:54
This actually created whitespace on the right for me. I used a percentage value instead of the pixel value. – Con Antonakos Mar 12 '15 at 19:49
Just for completion: Doesn't work in IE8 too, see https://stackoverflow.com/questions/5142405/offset-a-background-image-from-the-right-using-css – Volker E. Mar 31 '15 at 21:04

Chololoco · Answer 2 · 2017-04-21T20:33:39.937

43

You can use the CSS3 "calc" function:

example:

background-position: calc(100% - 10px) center;

edited Apr 21 '17 at 20:33

answered May 30 '13 at 20:24

Chololoco

3,140
1
21
24

9

This works in all modern browsers - IE8 and below are unsupported (http://caniuse.com/calc). Be aware that you may get undesired results using calc in a CSS preprocessor, without escaping the calculation. For example `Less` processes `calc(100% - 10px)` as `calc(90%)`, unless written as `~"calc(100% - 10%)"`. – ajcw Oct 27 '13 at 21:46
In IE7 and lower you can solve this with `expression`s, in IE8 you're pretty much stuck. – Benjamin Gruenbaum Oct 28 '13 at 08:33
@JohnCatterfeld It's worth noticing for if anyone is just skimming your comment that '~"calc(100% - 10%)"' == 'calc(90%)'; you're probably looking for '~"calc(100% - 10px)"' when using LESS. – Dandy Jan 13 '14 at 16:53
@JohnCatterfeld works perfectly, however any idea how to stop Visual Studio from complaining about invalid properties when doing this without flat out turning errors off? ~"calc(100% - 10px)" is not valid property for background-position. Its only a warning but still sooner it did not appear – Matt Skeldon Mar 26 '14 at 15:25

score 10 · Answer 3 · answered Jun 21 '12 at 10:16

10

Just add 20px blank space to the image right side in a graphic editor.

answered Jun 21 '12 at 10:16

A. Z.

728
1
11
28

1

This is an easiest option to go with! however I believe that this is not the only way! – Nizam Kazi Oct 01 '13 at 13:13
19

This is a very ugly approach. – Marvin Rabe Oct 18 '13 at 08:22
6

@MarvinRabe Suggest something better. – A. Z. Oct 19 '13 at 05:52
How about what the highest rated answer says? – Matt Fletcher Aug 18 '14 at 15:17
Today better solution is using `calc`: http://stackoverflow.com/a/16845269/1447182 – A. Z. Nov 19 '14 at 10:55
Cross-browser awesome solution, one up. – emil.c Mar 05 '15 at 19:42

score 1 · Answer 4 · answered Oct 01 '13 at 12:57

use the following code to add 20px to the right of the background-image --

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}

use the following code to add 20px to the left of the background-image --

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}

score 1 · Answer 5 · answered Apr 20 '11 at 14:10

1

You can use other object inside li tag, and give it your background image with a margin-right:

li #image {
    margin-right: 20px;
    background: url(pp.jpg) no-repeat right center;
}

li {
    border: 1px solid #D4E8EB;
}

answered Apr 20 '11 at 14:10

Elieder

141
1
7

but i can't use background image with `#image`. because the background image i need vertically centered always and there are other elements also inside the `li` – Jitendra Vyas Apr 20 '11 at 14:14

score 0 · Answer 6 · answered Sep 25 '14 at 22:24

0

border-right: 20px solid transparent;

answered Sep 25 '14 at 22:24

Milk Man

1,256
13
21

Mild Fuzz · Answer 7 · 2011-04-20T14:07:54.887

-1

place a span tag within the <li> and add the margin to that, that way your <li> should still stretch to the edge along with your border.

edited Apr 20 '11 at 14:07

answered Apr 20 '11 at 14:00

Mild Fuzz

29,463
31
100
148

but if i add padding to `ul` the `border` also leave that space which I don't want. – Jitendra Vyas Apr 20 '11 at 14:02
I've edited to answer to be closer to what you need. – Mild Fuzz Apr 20 '11 at 14:08
but the background image i can't use on `span` – Jitendra Vyas Apr 20 '11 at 14:11
yes you can, just use display: block; – Mild Fuzz Apr 20 '11 at 14:14

score -1 · Answer 8 · answered Apr 20 '11 at 14:02

-1

unfortunately the 'easy' solution is edit your image and add 20px right and bottom of transparent space.

you could achieve it with background-clip / background-origin probably but that'd take a bit of playing with...

answered Apr 20 '11 at 14:02

Ian Wood

6,515
5
34
73

I'm using same image at many place but I think editing the image for one case would be ok, if there is no other solution – Jitendra Vyas Apr 20 '11 at 14:07

How to set fixed background position from right side in css?

8 Answers8