Trouble with scaling image in CSS

[phpjayx]

I have the simple text below for my button, which in its original form is 125x125 pixels. It doesn't scale it on my page, all it does is clip the image at 50x50 pixels.... what am I doing wrong here?

 

.myButton1 {

background:url(/Button1.png) no-repeat;

cursor:pointer;

width: 50px;

height: 50px;

border: none;

 

}

 

---------------------------in my js file

 

cellHtml += ' <input class="myButton1 margin_top_20px" onclick="' + onclickType2 + '" type="button">';

[BagoZonde]

You can't scale backgrounds, that's it.

[White_Lily]

Actually - you can scale backgrounds using CSS3, however most (if not all) browsers are not supporting this method.

[BagoZonde]

Check this out with background-size property:

 

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size

 

Status: No support for <=IE8, unfortunately lot people using oldie IE. You know your target so decide if it's worth to use it.

 

Opera, Safari, Firefox, Chrome in newest versions and IE9 seems to work properly.