How to make an image in a box responsive using CSS?

Navigation
-2

Good evening, I'm having a hard time making the following idea work:

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

Then 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've been able to always display the box 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 fit the image inside the box?

    
asked by anonymous 30.11.2016 / 02:11

1 answer

2

Try this css property:

background-size: 100% 100%;

Below is 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 with this property it gets 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>
    
30.11.2016 / 18:35
CSS does not load in mobile version when installing SSL certificate free When splitting project into multiple headers the error occurs: dereferencing pointer to incomplete type