无法在此小提琴中显示背景图像

Question

I'm trying to practice my jquery and javascript. I was working on a fiddle that rotates remarks as the user clicks the arrow.png. But for some reason it's not showing and i can't test my code lol... I was going to add css animations to it as well to have it rotate rather than using javascript. Here is the fiddle http://jsfiddle.net/wrkmH/6/ . What's wrong with my css that it isn't showing? I know this is a very noob question, sorry i just can't figure it out. The html:

<p>I'm a <span id="remark">nice guy </span>.
   <a href="#" id="spinner" class ="anim"></a>
</p>

The css:

#spinner {
   height: 30px;
   background-image:url('http://i.imgur.com/bfhwPv9.png');
   background-repeat:no-repeat;
   display: inline-block;    
}

Answer 1

The image you're loading " http://i.imgur.com/bfhwPv9.png " is 200px x 200px. You're currently setting the height to only 30px. If you set #spinner to the image dimension:

#spinner {
    height: 200px;
    width: 200px;
    background-image:url('http://i.imgur.com/bfhwPv9.png');
    background-repeat:no-repeat;
    display: inline-block;    
}

You'll be able to see the spinner: demo fiddle

Answer 2

try this

#spinner {
    height: 200px;
    background-image:url('http://i.imgur.com/bfhwPv9.png');
    background-repeat:no-repeat;
    display: block;    
}

Answer 3

Just replace your css with the following one,

#spinner {
    height: 200px;
    width:  200px;
    background-image:url('http://i.imgur.com/bfhwPv9.png');
    background-repeat:no-repeat;
    display: inline-block;    
}

This would solve your problem. keep coding :)