title: Image sprites not displaying
body: <p>Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:</p>
  
  <p>I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:</p>
  
  <pre><code>&lt;img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" /&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>img.index1 {
      width:258px;
      height:300px;
      background:url(Images/index.png) 0px 0px;
  }
  </code></pre>
  
  <p>Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.</p>
  
  <p>EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"</p>