background-position: negative value

[SSteven]

Please refer the w3schools example on Image sprites: https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav.

Here, the extracted images have negative values for the horizontal position:

The #prev id has is set to -47px and the #next id to -91px.

What do the negative values signify?

The tutorial only states that the top-left corner is (0, 0) and the x-coordinate and y-coordinate increase to the right and bottom respectively, which is standard.

Thanks.

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

 

[dsonesuk]

It uses ones single image to contain all images, the container is width 43px, you use -47px or -91px, to move the whole background left! To bring a specific portion of the background image into view and centre it.

Edited November 9, 2018 by dsonesuk