Sprite with complicated positioning case

Question

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.

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

Why don't you use CSS3 gradients? – bookcasey Nov 04 '12 at 15:18 — bookcasey, Nov 04 '12 at 15:18

score 0 · Accepted Answer · answered Nov 08 '12 at 07:03

0

I changed to vertical sprite and it solved the problem.

answered Nov 08 '12 at 07:03

user1732217

67
1
7

Sprite with complicated positioning case

1 Answers1