-2

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?

1 Resposta 1

2

Tenta essa propriedade do css:

background-size: 100% 100%;

Abaixo segue um exemplo:

.bg {
	position:fixed; 
	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;
	background-size: 100% 100%;
}
<div class="bg">Descrição da Imagem</div>

Acho que com essa propriedade fica melhor:

background-size: contain;

.bg {
	position:fixed; 
	left:25%; 
	top:25%; 
	bottom:25%; 
	right:25%;
	background:url(http://i66.tinypic.com/30201gn.png) no-repeat center ;
	opacity:9;  
	box-shadow:0 2px 5px #000; 
	border-radius:5px; 
	text-align:center;
	background-size: contain;
}
<div class="bg">Descrição da Imagem</div>

1
  • background-size: contain foi a solução para o meu problema, também em outra pergunta me responderam com o background-size: cover, ambos ajudaram muito. Agradeço! 1/12/2016 às 2:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .