-1

I want to change div background to the right side

i have some css class uses background-position: x,y.

The css code:

.menu, .bg1, .bg2 {
    background-image:url(bg.png);
    background-repeat: no-repeat;
    padding-left: 50px;
}
.bg1 {
    background-position: 0px 5px;
}
.bg2 {
    background-position: 0px 15px;
}

all I want to show padding and background on right side!

padding-right: 50px;

how i can move background position to the right side without need to change x,y position, just align it to right side?

jsfiddle: http://jsfiddle.net/SkL43/

Osiris
  • 131
  • 3
  • 16
  • 1
    `I want to change div background to the right side` you know this is not much understandable? – Roko C. Buljan Nov 15 '13 at 15:46
  • @RokoC.Bulijan I just edited it as you posted that... – Jace Cotton Nov 15 '13 at 15:46
  • I wants to shift the background to the right without changing the bg1 and bg2 background positions, now it display background on left side, but I want to show it on right sides. when I add background-position to right to main class, bg1 and bg2 not display selected position and display outside. hope you understand! – Osiris Nov 15 '13 at 15:55
  • 1
    Don't understand add a fiddle or something... how do you expect to shift the background without change the background-position? – DaniP Nov 15 '13 at 15:57
  • how can fix it with changing background-position? is it effect to bg1 and bg2 background positions? – Osiris Nov 15 '13 at 16:02
  • Yes if you have defined background-positions you need to override those porperties. i don't know what you really want post an image or fiddle – DaniP Nov 15 '13 at 16:06
  • 1
    like this ? http://jsfiddle.net/SkL43/11/ tell me and i post it as an answer – DaniP Nov 15 '13 at 16:28
  • yes like that, it work – Osiris Nov 15 '13 at 16:49
  • @Danko I was thinking about the same solution. But he said not to change the position :-/ – Murshid Ahmed Nov 15 '13 at 16:53
  • @irplayboy post it as the answer – DaniP Nov 15 '13 at 16:57

3 Answers3

1

With background-position you can do declarations like:

background-position: center right;

Here the first values is Horizontal and Second Vertical.

Edit

After see you Fiddle i came to this solution: http://jsfiddle.net/SkL43/11/

You need to change the first value of the background-position to take it just to the right:

.bg1 {
  background-position: 100% 0px;
}
DaniP
  • 37,813
  • 8
  • 65
  • 74
  • 1
    He's already done that, he's saying he wants to shift the background to the right *without* changing the original background position property... I think... the question is a bit hard to understand. – Jace Cotton Nov 15 '13 at 15:47
  • He says don't change x,y position i guess he refers to fixed values – DaniP Nov 15 '13 at 15:49
0

add position:relative and right:0px; to what ever div your image is in

SaturnsEye
  • 6,297
  • 10
  • 46
  • 62
0

It sounds like you may be trying to keep your image offset from the right hand side. If so, you can do this by using the four-value syntax for background positioning or you could use the css calc() function.

Brian
  • 21
  • 3