CSS Sprites background-position

3 posts, 1 answers
  1. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 02 Mar 2012 Link to this post

    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;
  2. Answer
    Ivan Zhekov
    Ivan Zhekov avatar
    649 posts

    Posted 07 Mar 2012 Link to this post

    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

    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 07 Mar 2012 Link to this post

    Thanks for the explanation.

Back to Top