title: CSS entire sprites image is loaded
body: <p>I am new to CSS sprites and trying to use them on firefox.
  The problem is when I load sprite on  tag or any  tag, it shows entire sprite image on page.</p>
  
  <p>I tried using text-indent = -9999px also but that didn't help. The image was still shown on top of rest of page. Using z-index didn't help either.</p>
  
  <pre><code>#container{
  background: url(csg-50e22b073c545.png) no-repeat top left transparent;
  overflow: hidden;
  }
  .bulletform{
  background-position: 0 - 1567px;
  width: 30px;
  height: 30px;
  }
  </code></pre>
  
  <p>So, my questions are:
  1. How to avoid displaying entire sprite image?
  2. Can I just load sprite image once on say  or some root DIV tag for page? and then use background-position to show individual images at relevant places?</p>
  
  <p>Please help.</p>