My Web Training

📖 Image Sprites

CSS Sprites

Using sprites can improve site performance by reducing the number of requests your page makes to the server combine multiple small images into a single image. Use background-position in combination with height and width to only display the image you want. To make this work, place this code in the head section of your page. Also, you will need to create an images directory and place the sprite image file there.

<style>
    #YouTube {
	    display: inline-block;
	    width: 72px;
	    height: 72px;
	    background-position: -72px 0;
	    background-image: url('images/social-sprites.png');
    }
    #Pinterest {
	    display: inline-block;
	    width: 72px;
	    height: 72px;
	    background-position: 0 -72px;
	    background-image: url('images/social-sprites.png');
    }
</style>

Think of these icons as being in a grid. They are each 72 pixels wide by 72 pixels tall. So, you will set the height and width of the div at 72 pixels each so users can view each icon individually. It like using the div to create a window.

To position the image is a little more confusing. As the browser attempts to align the image that is 288 pixels wide and 432 pixels tall, it has to move it according to the background-position value. The top-left corner is 0 0. Setting background-position: 0 0; will align the top left corner of the image sprite with the top left corner of the 72 pixel div. This will show the first icon.

To see the second icon on the first row, set the background-position: -72px 0;. This moves the sprite image to the left 72 pixels relative to the div to display the YouTube logo. To see the Pintrest logo set background-position: 0 -72px; This will move the sprite image up 72 pixels relative to the div.

Each logo is 72 pixels away from the previous. Just keep subtracting 72px for each image you want to skip. IE: Google+ is at background-position: -144px -144px; You have to subtract so the image will move left and up relative to the viewport.

See more on image sprites from W3 schools.

In order to add these to your site, you need to create a div and add the id of the sprite you defined in the style section. If I wanted to show the YouTube sprite, I would use the following code added to my page where I wanted the sprite to appear. IE: In the footer. To make the div a clickable link, just wrap it in an anchor tag.

<footer>
	<a href="https://www.youtube.com/"><div id="YouTube"></div></a>
</footer>