title: Resizing Background Image next to div
body: <p>I'm trying to make my front page responsive and really only have 2 elements to worry about. I have a background image starting from the left and a div containing various objects associated with the right side of the screen. I'd like to have it so that when the browser shrinks, the background image shrinks appropriately so that the div on the right side doesn't start intersecting with the image. As needed after a certain point I'm willing to make the background image disappear altogether so that the div has more space. How would I be able to do that? The code is very simple. Just a background image starting from the left and a div with right: 0%.</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>body
  {
      background-color: #EAE7DC;
      background-image: url("images/Earth.jpg");
      background-repeat: no-repeat;
  }
  
  .block1
  {
      position: absolute;
      right: 0%;
      top: 113px;
      min-width: 415px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block1"&gt;
      &lt;h1&gt;Log In&lt;/h1&gt;
      &lt;form&gt;
          &lt;input type="text" id="username" placeholder="Username"&gt;
          &lt;input type="password" id="password" placeholder="Password"&gt;
          &lt;button type="button" onclick="logIn()"&gt;Log In&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>