Move a CSS sprite within a div?

Move a CSS sprite within a div?

What I'm trying to do is have a sprite as a background for my links. Then
when it hovers it changes to a different colored sprite. The code below
accomplished that.
The problem is that the sprites are directly over/behind the link text. Is
there a way to position where the sprite is shown in relation to the text?
If I change background-position it just changes which pixels are used for
the sprite, not the actual position of the sprite. Thanks in advance!
HTML
<a class="sprite-link" href="#">Link Text</a>
CSS
a:hover {
color: black;
}
.sprite-link {
background: url(spriteurl.png) no-repeat;
background-position: 0px 0px;
width: 165px;
height: 45px;
display: block;
}
.sprite-link:hover {
background: url(spriteurl.png) no-repeat;
background-position: 0px -45px;
width: 165px;
height: 45px;
}