CSS sprites - multiple calls
css
Solution
The only thing wrong with that technique is that your CSS will have redundant code, which makes it larger (in terms of bytes) than it needs to be.
It does not load the background image more than once. You can confirm this by opening your developer tools and watching the network tab.
Problem
Is it wrong to call the sprite image for every instance it is needed in css? How does the browser handle this, is it only being loaded once? Example: ``` .box1{ background: url('../img/sprite.png') 0 0 no-repeat; } .box2{ background: url('../img/sprite.png') 0 -20px no-repeat; } .btn{ background: url('../img/sprite.png') -100px -60px no-repeat; } ``` I have seen some examples where you call the sprite once and just alter the background position. Example: ``` #myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; } #myDiv .box2{ background-position: 0 -20px; } ```