Problem with Responsive Image

Question

img {
background-image: url(../img/slides/11.jpg);
max-width:100%;
height:auto;
}

When I put the code above, the following error occurs:

The image (as in the photo) goes up.

Since without the code it’s like this:

What can I do?

   #home .bg-img {
	padding: 100px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	top: -50px;
	left: -50px;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	}

    #home .bg-img-1 {
	background-image: url(../img/slides/11.jpg);}

<div class="bg-img bg-img-1"></div>

Answer 1

Work background-image only on img tag parent.

In the case of the img tag, leave the image path in the src attribute normally, and in CSS, remove the opacity completely, so the img tag takes care of filling in the required space of the image, while the parent, with the background-image, takes care of displaying the image responsibly within the limits.

In his example, the only space available was the 100px padding. so the background-image tried to fill only that space.

CSS code:

#home .bg-img {
padding: 100px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -50px;
left: -50px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}

#home .bg-img-1 { background-image: url(../img/slides/11.jpg); }
#home .bg-img img{ opacity: 0; }

HTML code:

<div class="bg-img bg-img-1">
<img src="../img/slides/11.jpg">
</div>