CSS CSS Image Sprites A Basic Implementation
Example
What's an image sprite?
An image sprite is a single asset located within an image sprite sheet. An image sprite sheet is an image file that contains more than one asset that can be extracted from it.
For example:
The image above is an image sprite sheet, and each one of those stars is a sprite within the sprite sheet. These sprite sheets are useful because they improve performance by reducing the number of HTTP requests a browser might have to make.
So how do you implement one? Here's some example code.
HTML
<div class="icon icon1"></div> <div class="icon icon2"></div> <div class="icon icon3"></div> CSS
.icon { background: url(“icons-sprite.png”); display: inline-block; height: 20px; width: 20px; } .icon1 { background-position: 0px 0px; } .icon2 { background-position: -20px 0px; } .icon3 { background-position: -40px 0px; } By using setting the sprite's width and height and by using the background-position property in CSS (with an x and y value) you can easily extract sprites from a sprite sheet using CSS.
