Imagen background en botón responsive

[sfumatto]

Hola a todos.
Estoy diseñando una web en la que hay una serie de botones con imágenes de fondo que cuando pasas el ratón por encima cambia a otra imagen, para no utilizar imágenes de sustitución coloqué las imágenes como background, definiéndolas en css tanto normal como la posición hover...

Pues bien el problema viene al definir el diseño responsive mediante Media Queries: el ancho del div y de la imagen las defino como 100% (width y background-size) pero el problema lo tengo en la altura que no puedo definirla con porcentajes y como la imagen es un fondo y no en una img insertada...

No sé si me he explicado, he buscado mucho sobre esto pero solo encuentro casos en los que la imagen es el fondo del body, lo cual no es mi caso.

Alguna solución ????

[DesgraciadoGabo]

Tu botón seguramente tiene una definición por medio de background:url... lo único que debes hacer es agregar background-size:cover; eso te ayudará mucho o en dado caso a tu background:url(...) 100% 100% no-repeat; algo así debe funcionar también, saludos!

[sfumatto]

Gracias ! La imagen si que se me escala proporcional, el problema es que la altura de la clase que lo contiene no le acompaña, es decir, la anchura si que se ajusta porque le especifico width:100%, también la imagen de background pero la altura no, claro al ser una imagen en background no detecta la altura automática para el 100% de anchura, no sé si me explico...

[gonzaabel]

Hola, prueba con esto, ve a la clase del div del botón (fuera de las medias queries) y agrégale esto: background-size: 100% 100%;
Esto hará que la imagen ocupe el 100% del div que contiene el botón tanto del ancho (primer valor) como del alto (el segundo valor).
Saludos.
PD: como te dijo gabo te deberia de servir, tienes que tener tambien un background-repeat: no-repeat; para que la imagen no se repita.