 <p>You're using <code>img</code> tags with <code>background-image</code>. I honestly don't know what browser support is for that, but it's a bad idea. Instead use divs. You'll also need to make the styles forcing it to inline block. Alternatively, you could go with something like font awesome/glyphicon's strategy of <code>::before</code> styling, usually used with spans.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .outdoor { background-image: url(sprites.png); background-repeat: no-repeat; background-position: -14px -110px; width: 20px; height: 20px; display:inline-block; } .parking{ background-image: url(sprites.png); background-repeat: no-repeat; background-position: -15px -60px ; width: 20px; height: 20px; display:inline-block; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear&lt;/h1&gt; &lt;div class="outdoor" &gt;&lt;/div&gt; &lt;div class="parking" &gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>