Jump to content
SSteven

background-position: negative value

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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 by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×