imagen de fondo

[indiana]

Hola, tengo puesta una imagen de fondo en una clase de un input, y quisiera que al cambiar el tamaño de letra desde las opciones del navegador, creciera la imagen al igual que crece el texto que se introduce en él, pero no lo consigo, ¿alguien sabe cómo hacerlo? Esto es lo que tengo:

código css:
#medioa { margin-top: 0em; vertical-align: top; background-color: White; margin-left: 4em; }

.fondo1a {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.25em;;font-weight: bolder;color: #525252;text-align: center;
background-image: url(../img/fondo1.gif);background-position:center; vertical-align: middle;background-repeat:no-repeat;
height: 2.2em; width: 2.2em; padding: 0.5em 0.3em 0.3em 0.3em; border:none; margin: 0.1em 0.1em 0.1em 0.1em;
}

.negro {margin-right: 0.2em;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 0.75em;color:#000000;font-weight: bolder;font-variant: normal;letter-spacing : 0em;text-decoration: none;text-indent: 0em;font-stretch: ultra-condensed;}

código html:
<div id="medioa">
<span class="negro">doble</span>
<input type="Text" tabindex="8" title="" class="fondo1a" name="" value="3" maxlength="1" size="1">
</div>

Por favor, ya no sé que poner!!!!