Elementos de formularios con imagenes

[stramin]

Hola a todos!

Espero que puedan ayudarme con este problema, necesito hacer varios elementos de formulario personalizados, por ejemplo aquí están los botones y submits:

Código CSS:

input[type="button"],input[type="submit"]{
    background: url(img/button.png) no-repeat top left;
    background-size:100% 25px;
    width: 100px;
    height: 25px;
    padding-top:3px;
    padding-left:5px;
    padding-right:5px;
    border: 0px;
    color:#DDD;
    font-size:16px;
    font-weight:bold;
}
 

y aquí los textos y contraseñas:

Código CSS:

input[type="text"],input[type="password"]{
    background: url(img/input.png) no-repeat top left;
    width: 160px;
    height: 20px;
    padding-left:5px;
    padding-right:5px;
    border: 0px;
}
 

como verán el fondo de la las entradas de textos tiene una imagen llamada "input.png" la cual tiene un ancho de 160px

El problema comienza cuando quiero hacer elementos de tamaños mayores o menores de 160 pixels, ya que la imagen se deforma.

La pregunta es si es posible hacer que la imagen se estire pero solo al medio -o- si recorto la imagen en partes y hacer que las esquinas se mantengan... algo así como una inflamación liquida, no se si se entiende.

Y de ser posible, que no sea con CSS3

Agradezco cualquier ayuda!

[stramin]

Bueno, al final lo soluciones poniendo fondos multiples con CSS3