Databases
StackOverflow2013
Postsdbo
POCSS sprite - Image not displaying
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS sprite - Image not displaying
    text
    copied!<p>I'm just trying to learn how to use sprites. I had the following code: </p> <pre><code>&lt;div class="jumbotron"&gt; &lt;h1&gt;&amp;nbsp;&lt;/h1&gt; &lt;h1&gt;&amp;nbsp;&lt;/h1&gt; &lt;h1&gt;&amp;nbsp;&lt;/h1&gt; &lt;/div&gt; </code></pre> <p>with the following css: </p> <pre><code>.jumbotron { background: url("../img/lsm1280.jpg"); padding: 1em; height: 12.5em; width: 42em; margin-top: 2em; margin-bottom: 2em; background-color: #eeeeee; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } </code></pre> <p>I'm trying to use css sprites. So I've generated a png file using: <a href="http://spritegen.website-performance.org/" rel="nofollow noreferrer">http://spritegen.website-performance.org/</a></p> <p>And I've changed my css code to look like this: </p> <pre><code>.jumbotron { background: url("../img/csg-5267d2af270ac.png") no-repeat top left; padding: 1em; height: 12.5em; width: 42em; margin-top: 2em; margin-bottom: 2em; background-color: #eeeeee; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } </code></pre> <p>And I'm trying to change the HTML code like so: </p> <pre><code> &lt;head&gt; .... stuff &lt;style&gt; .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; } " &lt;/style&gt; &lt;/head&gt; &lt;div class="jumbotron"&gt; &lt;img class="sprite-lsm1280"/&gt; &lt;/div&gt; </code></pre> <p>I've been reviewing the comments in the following post: <a href="https://stackoverflow.com/questions/401602/cant-get-css-sprite-to-work-what-am-i-doing-wrong">Can&#39;t get CSS Sprite to work..what am I doing wrong?</a></p> <p>I'm going through each answer to see what I'm doing wrong.. but haven't found it yet. Any suggestions would be appreciated. </p> <p>Thanks. </p> <p><strong>EDIT 1</strong></p> <p>I've been playing around with the developer tools in my browser, and now I see that an image is being loaded, but it's the wrong one! I've been changing the size of the container's height / width property and that's how I've determined that the image is loading... but just not the right one. </p> <p>When I used the online tool to generate the css sprite, it created a bunch of classes for me, including the one below: </p> <pre><code> .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; } </code></pre> <p>That's the css I've been trying to use on the image tag. But it seems like the background position is incorrect... I'm not sure how to fix this / test to prove that that's the case... Thanks. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload