title: Resizing background image based on browser window size (HTML, CSS)
body: <p>I am trying to have my background gradient fill the available "real estate" of the browser window. <a href="https://i.stack.imgur.com/oe7tz.png" rel="nofollow noreferrer">Here is an example of what is currently happening.</a> I've copied and pasted the related code, please let me know if I'm missing any info you need!</p>
  
  <p>I have tried the methods listed <a href="https://css-tricks.com/how-to-resizeable-background-image/" rel="nofollow noreferrer">here</a> and <a href="https://css-tricks.com/perfect-full-page-background-image/" rel="nofollow noreferrer">here</a> but none of them have worked for me. Any other suggestions, or am I missing something obvious? Thanks!</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>.mainbody {
    background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
    border-style: solid;
    border-color: #ffffff;
    font-family: Helvetica, sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 50%;
    min-height: 50%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mainbody"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>