title: How to create image classes with background url CSS
body: <p>I am making a game of chess and I want to create different classes that will display different background images.</p>
  <p>For example, <code>&lt;div class=&quot;pawn&quot;&gt;&lt;/div&gt;</code> should have a background image of a pawn. (A pawn is a chess piece). Here is what I have:</p>
  <pre><code>.king {
    width:80px;
    height:80px;
    background:url(/imgs/pieces.png) 0px 0px;
  }
  .queen {
    width:80px;
    height:80px;
    background:url(/imgs/pieces.png) 133.33333333333334px 0px;
  }
  </code></pre>
  <p>Class king works although it is too large. But class queen does not appear. I measured the dimensions and the size of each piece is 133px. So am I using the <code>background</code> property correctly?</p>
  <p>This is the sprite sheet I am using: <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Chess_Pieces_Sprite.svg/800px-Chess_Pieces_Sprite.svg.png" alt="this" /></p>