Sprite with complicated positioning case

HTML & CSS
1

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

/*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;  }
2

The problem is that your sprite image squares are only 40px wide, but you need them to be much wider. You can’t use repeat-x, because that will mean that other colors either side will show. You need to redo the sprite image with each color above the other, and then you’ll need to adjust the negative offsets accordingly (pulling the image up rather than pulling it left).