title: CSS sprites as background
body: <p>Is it possible to position a sprite icon as a background of an element?
  I have a file, "icons.png" which contains several icons. I want to select one of those as a background of an element.
  Usually I would use 
  <code>.sprite {
      background: url('imgs/icons.png') no-repeat 0 -21px;
      width: 17px;
      height: 10px;
  }</code> and use this class for a button, etc...</p>
  
  <p>The problem is I have a text input and I want to modify it's placeholder
  .First I did this, which works perfectly if the file I use is the icon itself</p>
  
  <pre><code>:-webkit-input-placeholder{ background: url('singleIcon.jpg') center right no-repeat; }
  </code></pre>
  
  <p>But now I want to use a file which contains more icons.
  Is it possible to use something like this ?</p>
  
  <pre><code>:-webkit-input-placeholder{ background: url('imgs/icons.jpg') center right no-repeat; }
  </code></pre>
  
  <p>The problem in the last line of code is that it will select all my image (which of course contains <strong>all my icons</strong> I want to use on the website), I want to select only a part of that image  ( the icon I want to use ) </p>