CODEWITHSUNDEEP
htmlcss
DextrousDave
DextrousDave

Reputation: 6793

Background Image not sized to specified width & height

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

Upvotes: 0

Views: 285

Answers (4)

Jonathan Calb
Jonathan Calb

Reputation: 761

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>

Upvotes: 1

Ana
Ana

Reputation: 37178

You need to set 

background-size: 150px 40px;

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

Firstly you should move your style rules into an external .css file. Not only will it make your code easier to read, but it's a better separation of concerns.

Secondly, unless you're using the CSS3 background-size property, you cannot explicitly set the size of a background image. It will be 100% of the original images size, and completely separate to the size of the element it is the background of.

To use background-size, try this: background-size: 150px 40px;. Be aware that this will not work in IE8 or lower though.

Upvotes: 1

ravi
ravi

Reputation: 3424

You can use background-size syntax

Below might be helpful
http://www.w3.org/TR/css3-background/#the-background-size

Upvotes: 1

Related Questions