How to make background of a div responsive?

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