title: How to make CSS background responsive with certain dimensions
body: <p>I'm creating a website and I am attempting to add a background image to the page that covers the entirety of the page and is responsive, yet I am having difficulty doing so. Whenever I tweak the width and height to match cover the entirety of the homepage, I obviously find that the dimensions don't scale when I move the page to another monitor, or make the window smaller. However, I need to tweak the width and height in order for the image to cover the page. Is there a way I could make the image responsive AND tweak the dimensions to my liking?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#background-image-container {
    position: absolute;
    max-width: 100%;
    height: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="background-image-container"&gt;
    &lt;img src="static/images/waco-siege2.jpg" id="background-image" style="opacity: 0.7; display: block;" width="1370" height="665"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I realize that my code is a mess and some parts may contradict other parts; but this just shows everything I have currently attempted.</p>