Question

I have a link tag for which I want to add a background image. Now I specified a width and height for the background which is the width and height of the image. The problem is that the browser does not size the background image to those specified sizes, it ignores them.
Here is my code: Any suggestions?

<div align="center" style="font-size: 14px; font-weight: bold; font-family: Arial,   
Helvetica, sans-serif;">
<a id="displayText" href="javascript:toggle();" title="UK referral system credits" 
     style="background: url(images/earnings.png) no-repeat center; width: 150px; 
     height: 40px;">Show my earnings</a>
<iframe id="toggleText" style="display: none;" frameborder="0" height="700" 
    src="http://v4m.mobi/cwf/facebook/uk/user_temp_credits_earned.php"; target="_blank"   
    align="center" width="300" scrolling="Auto"; bgcolor="#C9D3DE"> </iframe>
</div>

Thank You

Answer 1

add “display: block” like this:

<a id="displayText" href="javascript:toggle();" title="UK referral system credits" 
     style="background: url(images/earnings.png) no-repeat center; width: 150px; 
     height: 40px; display: block;">Show my earnings</a>