Scale SVG background to fill screen without white borders preserving aspect ratio
<p>I am using a SVG background image, with a SVG and HTML layer above. I have the SVG scaling ok on screen resize but sometimes white areas appear on sides of the image - eg short height wide width. </p>

<p>Is there a way to scale the image, preserving aspect ratio, and forcing the image to fit either width or height depending on which is bigger then the current width/height. Eg where screen height is short and width is wide one would not see bottom of image but the image would fill the entire width. </p>

<p>Preferably using CSS, vanilla JS is OK too.</p>

<p>Current html:</p>

<pre><code>&lt;html&gt;&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;img class="svg_container" src="image.svg" id="svg_bg"&gt;
        &lt;svg class="svg_container" id="svg_area"&gt;&lt;/svg&gt;
        &lt;div id='html_overlay'&gt;
            &lt;div id="heading_area"&gt;
                &lt;h3&gt;Some text&lt;/h3&gt;
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>the css:</p>

<pre><code>.svg_container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden
}
#svg_bg {
    overflow:hidden;
    z-index: -1;
}
#svg_area {
    z-index: 1;
}
#html_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 100;
}
body {
    font-family: sans-serif;
}
</code></pre>