CSS Sprites background-position

[dhuss]

I am just starting to build my own custom skin based on the "Hay" skin. I have figured out how to create an assembly and recolor the sprites using Photoshop. The part I don't understand relates to the controls corresponding CSS file. In the CSS code below, the background-postion is: 100% -216px. What does the -216px represent? You can't have a negative pixel coordinate on the actual sprite image so where is this pointing to on the sprite to get the background? I am guessing you go down 216 pixels on the sprite and the image just above it is the image used for the background. Is this correct

.RadMenu_Hew .rmRootGroup a.rmDisabled:hover .rmExpandRight,
.RadMenu_Hew_Context .rmGroup a.rmDisabled:hover .rmExpandRight,
.RadMenu_Hew_Context .rmGroup a.rmDisabled:hover .rmExpandLeft,
.RadMenu_Hew .rmGroup a.rmDisabled:hover .rmExpandDown
{
    background-image: url('<%=WebResource("Hew.Web.UI.Skins.Hew.Menu.rmSprite.png")%>');
    background-position: 100% -216px;
}

[Ivan Zhekov]

Hello, Denis.

The background position CSS attribute tells where the top left pixel of the image is going to be relative to the top right pixel of the container. In addition to pixels, there also keywords and percantages, which work a bit differently.

The values are in order HORIZONTAL VERTICAL.

So in this particular case 100% means align the right edge of image with the right edge of the container.

The next value means pull the top edge of the image up 216px

Greetings,
Ivan Zhekov
the Telerik team

[dhuss]

Thanks for the explanation.

Dennis