title: How to make a background image responsive in CSS
body: <p>I asked a question previously on getting 2 divs to sit inside another div bootstrap container (1 top left, and 1 bottom right) which has now been solved.</p>
  
  <p>My next issue is, in the main div (with 2 divs sitting inside) I need a large background image, which is responsive, so brings the bottom right div upwards and inwards as the browser is made smaller.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;style&gt;
  #header {
  background-image: url(/images/background-image.jpg);
  position: relative;
  }
  
  #header .container {
  height: 893px;
  position: relative;
  }
  
  #header .div1 {
  position: absolute;
  top: 20px;
  }
  
  #header .div2 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  }
  
  &lt;div id="header"&gt;
  &lt;div class="container"&gt;
      &lt;div class="div1"&gt;
          Top left content
      &lt;/div&gt;
      &lt;div class="div2"&gt;
          Bottom right content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Adding the background image to the CSS like how I have done above, does not make the image responsive, but if I add it to the HTML as an image I cannot get the divs to sit on top of the image.</p>
  
  <p>What is the correct method of doing this?</p>