Search code examples
cssbackgroundbackground-position

align css background to the right

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/

Solution

  • 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;
}