title: Background .png not showing in Chrome and Firefox
body: <p>I must be missing something completely obvious here, but can't find anything online to tell me otherwise.</p>
  
  <p>I'm trying to pull a .png into a page using:</p>
  
  <pre><code>background:url(img/runner1.png) no-repeat;
  </code></pre>
  
  <p>I know the path is correct because doing the same with a jpg works:</p>
  
  <pre><code>background:url(img/header.jpg) no-repeat;
  </code></pre>
  
  <p>It does seem to work in Safari, but not in Chrome or Firefox.</p>
  
  <p>Am I missing something here?</p>
  
  <hr>
  
  <p><strong>EDIT</strong> -
  I am using:</p>
  
  <pre><code>#runner1{
  background:url(img/runner1.png) no-repeat;
  float: left;
  border: 1px solid #FFF;
  width: 195px;
  height: 205px;
  }
  </code></pre>
  
  <p>for the following element:</p>
  
  <pre><code>&lt;div id="runner1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The page is just running locally from my desktop (so no server involved).</p>
  
  <p>As mentioned previously the paths aren't the problem because a jpg from the same directory works.</p>
  
  <p>Firebug says:</p>
  
  <pre><code>runner1.png 
  GET
  Success
  image/png
  index.html:201  
  0B  
  8ms
  </code></pre>
  
  <p>But I can't see the preview or response in Firebug.</p>
  
  <p>Also accessing the file directly returns the same result.</p>