If you want the sprite to sit over the top of text, you need to place it in something like a span element that is absolutely positioned over the text. Here is an example (it's not a sprite, but works the same way):
I think I misread your question. But it's not clear what you are trying to do. An image over an image? That makes no sense. Do you mean that you want to use an image for a link but to have that image change on hover? That's quite easy, and it's what a sprite is for. BUT ... in a sprite, both the normal state and the hover state are part of the same image. You just shift the position of the background image on hover.
Firstly confirm that this is what you want, and we can explain further if that's the case.
Yes so I have a button which I want people to click on when to take them to another website. The button changes when you hover over it and its working great with the use of a sprite. However, when I try to place that button over the background image that I want to set it on then the button gets hidden behind the image. The order of the html doesn't matter, either way the button gets hidden.
This is still a bit confusing, but I'm guessing that you have a button, inside a bigger container that has a background image? In that case, place that bigger image as a background on the div that contains the button.
If that doesn't make sense, make up an image of what you are trying to do and post it here. If you are having trouble posting an image, use the "Manage Attachments" facility, or just post a link to an image online somewhere.
Image text can be made big and blurry, but cannot be enlarged like real text... of which there is none.
That aside, if you show an example of somewhere working the way you want, or can throw up a fake temp version page with real code (and real images) we can play with, we can show how it can be coded (and accessible too).