Superposición de texto en la imagen con desplazamiento – Responsivo

Estoy usando este tutorial para crear una superposición en mis imágenes con texto:

http://codepen.io/pdelsignore/pen/uqenH

Funciona muy bien, sin embargo, tengo un sitio web receptivo y si bash ingresar un% como el ancho / alto de ‘.box’ la imagen desaparece. Parece que solo puede ser un fijo con (es decir, px) que obviamente no se escala.

.box { cursor: pointer; height: 250px; position: relative; overflow: hidden; width: 400px; font-family: 'Open Sans', sans-serif; } 

¿Alguien tiene alguna idea? ¡Gracias por adelantado!

Pruebe probar min-width y min-height .

 min-width: 100%; min-height: 100%; 

En un proyecto en vivo usualmente usamos cualquier marco receptivo. Como bootstrap o fundación. Así que creo que podrías ignorar, ya que Framework lo manejará correctamente. No es necesario usar ningún% para que responda. Para Bootstrap usamos

  
Walk This Way
Follow the path of stone, a road towards an ancient past

Creo que las dimensiones de .box como un porcentaje se basarán en la altura del elemento principal. ya que no se especifica altura en el cuerpo, no tiene marco de referencia. intente agregar lo siguiente para obtener porcentajes trabajando en .box.

 html, body { height:100%; } 

aquí hay un codepen actualizado con algunos otros cambios para ilustrar el uso de porcentajes después de dar la dimensión de su cuerpo.

http://codepen.io/anon/pen/dPREBE