I have many sprite images which I don't know how to replace original css with complicated positioning case and here is one of them:

When I replace background image mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg with sprite image sprite_mbg.png and also add background-position to css of input, the button color become mixing due to the width and position.

Here is original css

Here is the wrong example


Code:
/*Sprite Image generated by Instant Sprite - Generate CSS Sprites Instantly*/
.sprite { background: url('http://s13.postimage.org/xmzbbctt1/sprite_mbg.png') no-repeat top left; width: 40px; height: 40px;  }
.sprite.mbg { background-position: 0px 0px;  }
.sprite.mbgh { background-position: -50px 0px;  }
.sprite.mbgg { background-position: -100px 0px;  }
.sprite.mbgr { background-position: -150px 0px;  }