title: Css background position coordinates
body: <p>I want to make css sprite with this image</p>
  
  <p><img src="https://i.stack.imgur.com/LfBIt.png" alt="http://oi49.tinypic.com/14nobhd.jpg"></p>
  
  <p>My html codes;</p>
  
  <pre><code>&lt;div class="top"&gt;&lt;/div&gt;
  &lt;div class="bottom"&gt;&lt;/div&gt;
  &lt;div class="right"&gt;&lt;/div&gt;
  &lt;div class="left"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And css codes;</p>
  
  <pre><code>.left{
  background : url(arrw.png) no-repeat 0 0;
  width:12px;
  height:19px;
  }
  
  .right{
  background : url(arrw.png) no-repeat -29px 0;
  width:12px;
  height:19px;
  }
  
  .top{
  background : url(arrw.png) no-repeat -12px 0;
  width:16px;
  height:12px;
  }
  
  .bottom{
  background : url(arrw.png) no-repeat -12px -12px;
  width:16px;
  height:12px;
  }
  </code></pre>
  
  <p>That work perfect but I don't understand why give negative values for background position. Isn't that coordinates system and Don't we be necessary give positive values for this? Position values start 0 0 (left top) and must takes positive values isn't it?What is wrong?</p>