Positioning a background image from the right rather than left

Question

Is it possible to specify that you want a background image (non-repeating) to sit, say, 5px away from the RIGHT edge?

I know it's possible to do this with CSS, but it defaults to the LEFT edge. I'd like the background image to always sit 5px away from the right edge instead.

CSS

#companyLinks li {
display: inline;
padding-right: 10px;
background-image: url(/img/shd/spacer.png);
background-repeat: no-repeat;
background-position: right center;

You may want to add better tags to this question as well, such as "css". I'm sure more CSS folks look for that tag than "background-image" or "background-position". — JoeLinux, Sep 14 '12 at 10:45

score 2 · Accepted Answer · answered Sep 14 '12 at 10:35

2

@Francesca

Instead writing 3 lines to define background you can use below one line code, which will serves your purpose...

background: url(/img/shd/spacer.png) no-repeat top right;

OR if you want it fix the position in Center then, you can use

background: url(/img/shd/spacer.png) no-repeat fixed right;

You're using two Positioning value, i.e. Center & Right which is creating conflict.

You can use one value for horizontal & one for vertical at a time.

answered Sep 14 '12 at 10:35

Hignesh Hirani

1,049
11
16

This doesn't give the desired effect. The background image is still butted up to the right. I need it 5px in. Is it not possible to do this? I find it odd that's it's possible from the left but not the right. – Francesca Sep 14 '12 at 10:37
@freebird I just ticked [community wiki] option while posting – Hignesh Hirani Sep 14 '12 at 10:40
@Francesca One odd but tricky solution, add transparent 5px to image in right. – Hignesh Hirani Sep 14 '12 at 10:43
@Francesca Well, it can be achieve, try using below code... background: url(/img/shd/spacer.png) no-repeat top right; margin-right:5px !important; As you're using this for LI, this code will be more relevant. – Hignesh Hirani Sep 14 '12 at 10:52
@HigneshHirani yes, Mr.Community Wiki...This answer is perfect. – Raju Sep 15 '12 at 04:47

score 0 · Answer 2 · answered Sep 14 '12 at 10:43

You can always edit the image to give you 5px of alpha-transparent spacing on the right, and then use:

background: url(/img/shd/spacer.png) no-repeat fixed right;

As suggested in Hignesh's answer.

I know it sounds like a hack, but that should certainly work. Either that or specifying a container div of a fixed width, and placing an inner div of (parent width - 5px), and make sure it's pinned to the left side, with the image to the right as designated by the above CSS.

Martin Kristiansson · Answer 3 · 2016-09-21T08:40:52.240

0

background-position: right 5px center;

or

background: url(/img/shd/spacer.png) no-repeat fixed right 5px;

edited Sep 21 '16 at 08:40

answered Sep 21 '16 at 08:33

Martin Kristiansson

2,166
1
12
5

score -1 · Answer 4 · answered Sep 14 '12 at 11:13

try using this table instead I think this should work according to your need :P

<table border="2" align="center" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr height="100%">
        <td style="background-image:url('http://www.dvd-ppt-slideshow.com/images/ppt-background/background-31.jpg'); background-position:right; background-repeat:no-repeat; " height="100%" ></td>
        <td  style="width: 10px;"></td>
    </tr>
</table>

Positioning a background image from the right rather than left

4 Answers4