Geek Answers Handbook

CSS sprites - multiple calls

Is it wrong to call a sprite image for every instance that is needed in css? How does the browser handle this, does it load only 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 saw several examples where you call a sprite once and just change the position of the background.

Example:

 #myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; } #myDiv .box2{ background-position: 0 -20px; }
+4
source share
2 answers

The only thing wrong with this method is that your CSS will have redundant code, which makes it larger (in terms of bytes) than it should be.

It does not load the background image more than once. You can confirm this by opening the developer tools and viewing the network tab.

+2
source

The background image will be downloaded only once.

To verify this, you can check which resources are loaded in Chrome by following these steps:

  • go to web page
  • right click anywhere on the page
  • click check item
  • click network tab
  • refresh the page

All downloadable resources will be displayed in this list.

Alternatively, you can dry your CSS as follows:

 .box1, .box2, .btn{ background-image: url('../img/sprite.png') } .box1{ background-position: 0 0 no-repeat; } .box2{ background-position: 0 -20px no-repeat; } .btn{ background-position: -100px -60px no-repeat; }
+1
source

More articles:


All Articles