title: CSS sprite displaying all images
body: <p>I am trying to use 1 single image file containing 4 images and display them using CSS sprite. Somehow, all 4 images are displayed. I was referring to one of the examples in w3schools.</p>
  
  <pre><code>&lt;div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;"&gt;
    &lt;img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/&gt;
    &lt;img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" /&gt;
  &lt;/div&gt;
  
  CSS:
  
  #ViewTypeContainer img#calendarView {
      width:82px;
      height:82px;
      background: url('/Images/ButtonToggle.png') 0 0;
  }
  
  #ViewTypeContainer img#grdView  {
      width:82px;
      height:82px;
      background: url('/Images/ButtonToggle.png') -30px 0;
  }
  </code></pre>
  
  <p>My image file is in .png format:</p>
  
  <p><img src="https://i.stack.imgur.com/kaQxv.png" alt="enter image description here"></p>
  
  <p>Can anyone spot my mistake? Thanks.</p>