title: How to make background of a div responsive?
body: <p>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 <a href="https://ask.fm/MohammadJarrar5" rel="nofollow noreferrer">ask.fm</a> , I have used <code>background-size: cover;</code> but it didn't work with me.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="cover"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
    }
  }
  </code></pre>