How to make an image within a box responsive, using CSS?

Question

Good evening, I’m having a hard time getting the following idea to work:

When I hover the mouse over a certain point, a box with an image appears, but I wanted this image inside the box to be responsive and adjust according to the screen size.

So I tried the following:

<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>

I got the box to always appear in the middle of the browser, regardless of the size, the problem is the image inside the box, which is not adjusting.

How can I adjust the image inside the box?

Answer 1

Try this css property:

background-size: 100% 100%;

Below follows an example:

.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>

I think that property is better:

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>