Using CSS image sprites on your EP web page

If you've done EP development you may have found yourself in the need to display an image from a .gif or .png file located in the system resource library that is deployed as part of the web solution. However, you may have discovered that the image file has multiple images (different resolutions).

So, for the ones who haven't used yet CSS sprites, here is how to do it and display only one of the images in the files (the one with the resolution you are interested in):

First just define your style, and set the right coordinates, so this would be the frame for your icon:

<style type="text/css">
    .smallIco
    {
        background-position: 0 32;
        width: 32px;
        height: 32px;
    }
</style>

<asp:TemplateField>    <ItemTemplate>
        <div runat="server" id="divAttachmentImage" class="smallIco" style="background-image: url('/_layouts/EP/images/Icon2505.png');"></div>        </ItemTemplate>    </asp:TemplateField>