Пример решения:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.menu {
width:100%;
border:0px solid black;
}
div.menu a {
border:0px solid red;
display:inline-block;
width:25%;
}
div.menu a:hover div {
border:0px solid green;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-image: url('ramka.png');
}
div.menu a div span {
border:0px solid blue;
display:block;
width:25%;
font-size:70%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
</head>
<body>
<div class="menu">
<a href=""><div style="line-height:300%;"><span>123</span></div></a>
</div>
</body>
</html>
div.menu - содержит нужные менюшки, от его ширины задаем ширину ссылок в %.
div.menu a - display:inline-block - чтобы можно было задать ширину ссылки
div.menu a:hover div - background-size: contain; background-position: 50% 50%; - по середине, чтобы полностью входила (т.е. либо по ширине, либо по высоте).
margin-left:auto;margin-right:auto; - выравнивание span'a по середине div'a
text-align:center - чтобы текст был по середине span'a (а значит и div'a, а значит и ссылки)
включил border, поставь вместо 0px, например, 1px и поиграй остальными значениями - увидишь как и что влияет.
Затем позиционируй элементы так, как тебе надо