title: My perfect background image
body: <p>I currently have a page like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-image: url("http://placehold.it/1920x1200");
      min-height: 100vh;
      min-width: 100vw;
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;Cool Background Man&lt;/title&gt;
              &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I need the <code>background-image</code> to always be the smallest that it can be while preserving scaling (no stretching). This means that <b>AT ALL TIMES</b> either <code>width: 100vw</code> or <code>height: 100vh</code>, depending on the screen size. Also <b>AT ALL TIMES</b> the image will fill the screen. It will <b>NEVER</b> show any white space. The image must also <b>ALWAYS</b> show the top right corner, the image size should adjust relative to that.</p>
  
  <p>To summarize, the image will always:</p>
  
  <ol>
  <li>Have either <code>width: 100vw</code> or <code>height: 100vh</code></li>
  <li>Show the top right corner, and the size will adjust relative to that.</li>
  <li>Fill the screen <b>for any screen size</b>. No white space <b>at all</b>.</li>
  <li>Never stretch. Always preserve the scaling.</li>
  </ol>