Search code examples
cssbackground-position

Is it possible to change the background-position while keeping "top right"?

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?

Solution

  • 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