SharePoint 2010 uses the “sprite” technique

SharePoint 2010 uses the “sprite” technique in some of its default layouts. Sprite is a method of showing multiple images on your site that are really just a portion of one larger image. A benefit is that it reduces HTTP traffic since you are downloading more images in one request. You can read more about the technique in these blogs:

CSS Sprites: Image Slicing’s Kiss of Death | IE6, CSS Sprites and Alpha Transparency | How To: Optimize Your Site with Image Sprites

For this blog I will get into how SharePoint 2010 uses the technique to show the Help icon, the Search icons, and several more images. Take a look at the single image below:

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

It is one image that contains several icons.

If you look at a SharePoint 2010 page you will see the Help icon in the top left corner of the page alone, without any of the other icons around it. This is done by putting the image above in a SPAN element that is 14 pixels by 15 pixels. That is only large enough to show one icon. The CSS of the element is also specifying that any overflow be hidden. So the image inside will not push the element to be larger. Here is the CSS for the span element:

display:inline-block;
height:15px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:14px;

The final piece of the puzzle is to make the Help icon show in the span and not the top left corner of the image. That is done with this CSS code on the IMG element:

position:absolute;
top:-94px !important;
left:0 !important;

The IMG is position property is set to absolute. Then the TOP property is given a negative value. The Help icon starts 94 pixels into the image so with the TOP property value at –94px the Help icon shows in the SPAN of 14×15 pixels and then the rest of the image is hidden.