Question

I have an object that have a background with background-position “top right”

I want to move this background-position up by 10px (on hover), but as soon I change the values, the new value is inserted from the 0,0 point (top left) but I want (top right)

Is there any 100% CSS solution to this?

Answer 1

I think this is what you want:

div{
    height:450px;
    width:450px;
    border:1px solid red;
    background-image:url(//IMAGE);
    background-repeat:no-repeat;
    background-position: 100% 0;
}

div:hover{
    background-position: 100% -10px;
}

Giving it a background-position:100% 0 sets it to the top right corner. Then minus 10px from the height on hover.

Example: http://jsfiddle.net/jasongennaro/Teyfj/

Height, width, and border are for example only