title: SVG to stretch at the biggest dimension and then fill the rest
body: <p>I have a SVG that I want to use as a background for body.
  What CSS should I use if I want my background to stretch at the biggest dimension and then fill the rest, like this:</p>
  
  <ul>
  <li><strong>Case 1:</strong> If the browser's <strong>viewwidth > viewheight</strong>, to make svg take the height of viewport, keep the aspect ratio(it' s 1:1), and then repeat on the horizontal untill the body is fully covered.</li>
  <li><strong>Case 2:</strong>  If the browser's <strong>viewwidth &lt; viewheight</strong>(usually mobile version of a website), to make svg take the width of viewport, keep the aspect ratio(it' s 1:1), and then repeat on the vertical untill the body is fully covered.</li>
  </ul>
  
  <p>I am trying to obtain this without JS, but if it's not possible, JS is a way to go too. Thank you!</p>