html5 button background image states

Question

I have a button and im trying to apply this image to its background, the green is the off state and yellow is the on click state. Can I use this image where both states are in same file or do I need to separate them? What is the standard for this situation and how does the css work?

<button>click me</button>
button {
    background-image:url('button.png');
}

Answer 1

Yes you can definitely use them. They're called CSS Sprites.

Here is a fiddle

button{
    width:196px;
    height:64px;
    background-image:url("http://i.stack.imgur.com/BSVeQ.gif");
    background-repeat:no-repeat;
}
button:active{
    background-position:0px -64px;
}