Scaling down a picture size

[ketanco]

The code below is what I have for displaying for my menu buttons at the left of my webpage...This basically displays a different color for text and different picture for the button when the mouse is over it...The second picture is the same except different color, so that it is as if the button changes color when mouse is over it....I have two different questions:
1)I want the buttons, b10.bmp and b20.jpg in display smaller scale....May be %70 of what they are...Is there a way to do that and if so how? I tried changing width to less than 222 but it just cuts the picture from its edge, and does not scale it down....
2)The buttons first disappear when I bring the mouse over it...Only when i bring the mouse over it a second time or so it displays the second ...How can I prevent that?
Question #1 is more priority right now....
.menu{
width:100px;
}
.menu a{
display:block;
width:222px;
height:50px;
valign: center;
margin:-15px 1000px 0px 0px;
background:url(http://www.........com/pictures/b10.bmp) no-repeat 0 0;
line-height:30px;
font-family:Arial ;
font-size:12px;
font-weight: bold;
color:white;
text-align:center;
text-decoration:none;
}
.menu a:visited{
color:#black;
}
.menu a:hover{
color:black;
background:url(http://www.......com/pictures/b20.jpg) no-repeat 0 0;
}
.menu a:active{color:#ffffff;}

[Fang]

1) Scaling of background image is not possible.

2) Possibly a delay in loading the images; .bmp images are usually very large and are not really suitable for websites. Use .png
Preloading (http://www.htmlite.com/JS020.php)of images can improve the situation.