Boa noite, estou com muita dificuldade em fazer a seguinte ideia funcionar:
Quando passo o mouse em cima de determinado ponto, aparece uma caixa com uma imagem, mas eu queria que essa imagem dentro da caixa fosse responsiva e se ajustasse conforme o tamanho da tela.
Então tentei o seguinte:
<div id="descricao" style="position:fixed; display:none; left:25%; top:25%; bottom:25%; right:25%;background:url(http://i66.tinypic.com/30201gn.png) center no-repeat ;opacity:9; box-shadow:0 2px 5px #000; border-radius:5px; text-align:center;">Descrição da Imagem, apenas mais um teste!</div>
Consegui que a caixa sempre apareça no meio do navegador, independente do tamanho, o problema é a imagem dentro da caixa, que não está se ajustando.
Como posso ajustar a imagem dentro da caixa?