Is it possible on CSS(2) say right-5 on background-position?

Question

Possible Duplicate:
Offset a background image from the right using CSS

CSS usually is :

background-position:right top;

but If I'd like to say somethings like right-5px? Is it possible? Like position in an element :

right:-5px;

Anyone know?

EDIT

Maybe it is unclear! I mean somethings like :

background-position:right-5px top;

http://stackoverflow.com/questions/5142405/offset-a-background-image-from-the-right-using-css — cloverink, May 23 '12 at 09:45

Christoph · Answer 1 · 2012-05-23T09:44:05.013

2

http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

As of CSS2.1 specs, you only can do this if you know the dimensions of the container.

Assume container is 300px. you can either say:

background-position:305px or use percentages.

However,

http://www.w3.org/TR/css3-background/#the-background-position

as of the css3 specs, you can define the offsets from all different corners.

So background-position: top 0 right -5px; would give your desired result.

Except IE, Support is quite good.

edited May 23 '12 at 09:44

answered May 23 '12 at 09:32

Christoph

50,121
21
99
128

1

I can't see any ways on doing this :O – markzzz May 23 '12 at 09:35
But it always start from left in count px! not from right! – markzzz May 23 '12 at 09:37
Css3, I need on css (i mind about IE) :) – markzzz May 23 '12 at 09:49
@markzzz than use a second container (either a div or :after which is not supported in IE7 though) which is shifted 5px to the right. – Christoph May 23 '12 at 09:50

sandeep · Accepted Answer · 2012-05-23T09:58:15.660

1

It's not possible with CSS2 but you can do a trick. Write like this:

div{
    background:red;
    width:200px;
    height:200px;
    position:relative;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    right:-5px;
    background:url('http://www.dummyimage.com/600x400/000/fff');
}

Check this http://jsfiddle.net/s9L2T/

edited May 23 '12 at 09:58

answered May 23 '12 at 09:47

sandeep

91,313
23
137
155

not true, css3 has an advanced background module. Check it out (link in my answer) for more info. – Christoph May 23 '12 at 09:47
My answer related to css2 not css3. OP clear explain "is it possible in CSS2" – sandeep May 23 '12 at 09:58
hehe, you edited your answer before commenting;) First you wrote "not possible with CSS". But nevermind, your workaround works (However not in IE<=7) – Christoph May 23 '12 at 10:05
I edit because i don't want next time any one come & say the same thing :) – sandeep May 23 '12 at 10:08

Is it possible on CSS(2) say right-5 on background-position?

2 Answers2