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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...