What is an image sprite in CSS?

.icon {
    width: 32px;
    height: 32px;
    background: url('sprite.png');
}

What is the main benefit of using sprites?

.home-icon { background-position: 0 0; }
.about-icon { background-position: -32px 0; }
.contact-icon { background-position: -64px 0; }

How do you display different icons from the same sprite?

.nav-item {
    background: url('nav-sprite.png');
}
.nav-item:hover {
    background-position: 0 -40px;
}

What effect does this create?

If icons in a sprite are 50px each and arranged horizontally, what is the background-position for the third icon?