How to make background of a div responsive? - html

Question

I have a container that positioned horizontally in the middle of the body, this container includes a div inside of it, this div has a background,
I want the background of the div to be responsive when shrinking or resizing the window like this site here ask.fm , I have used background-size: cover; but it didn't work with me.
HTML
<div class="container">
<div class="cover"></div>
</div>
CSS
.container {
width: 851px;
margin: 0px auto;
}
.cover {
background-image: url("wall.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
}
/* Media Queries */
#media screen and (max-width: 840px) {
.cover {
width: 100%;
}
.container {
width: 100%;
}
}
#media screen and (max-width: 600px) {
.container {
padding: 0;
}
}

Answer 1

I usually do a combination of these 2 things - depending on screen size - and I grab different src for the image / background or inline depends...
<section class="container">
<div class="inner-w">
<figure>
<img src="https://placehold.it/1600x900" alt="">
</figure>
</div>
</section>
<section class="container section-name">
<div class="inner-w">
<!-- ... -->
</div>
</section>
https://jsfiddle.net/sheriffderek/4j2avj7v/
figure {
margin: 0;
}
figure img {
display: block;
width: 100%;
height: auto;
}
.container {
background: gray;
border: 1px solid blue;
}
.container .inner-w {
max-width: 400px; /* just for this example... likely 900+ */
margin: 0 auto;
background: red;
}
.section-name .inner-w {
min-height: 300px; /* it needs to have some shape */
background-image: url('http://placehold.it/1600x900');
background-size: cover;
background-position: center center;
}