Using Sprites

You would have probably learnt about using sprites from here or somewhere else on the web.
Many tutorials who have told you to use background positioning to position the sprite. This is somewhat correct, but you aren’t really thinking long term over here.
If in the future, there is a change in the sprite generation engine, and positions of the images inside the sprite, changes a bit also, you would be having issues, as show below :
Screen Shot 2014-09-16 at 3.15.37 PM
You can see that the facebook images overlap here. This is because of the background positioning. The easiest way would be to just change the background position.
The correct way would be to fix it as shown below :
width: 150px;
padding: 5px 0px 0px 30px;
margin-top: 6px;
float: none;
background-repeat: no-repeat;
height: 15px;
margin-bottom: 3px;
Use the combination of the above to actually position the image.


Leave a Reply

Your email address will not be published. Required fields are marked *