21127479

HTML

<p>A scrollbar is added in order to fit the image's height when there isn't enough room. Resize the window. Also, see the results when JS isn't run.</p>

CSS

html, body {
    height:100%;
}
body {
    background: url('http://placehold.it/200x150') 0 0 / 100% auto no-repeat;
}
p {
    margin-top:10px;
    padding:5px;
    position:fixed;
    font-weight:bold;
    background: white;
}

JavaScript

var img = new Image();
img.src = 'http://placehold.it/200x150'; // using a direct link for example/jsFiddle reasons.
//img.src = window.getComputedStyle(document.body).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize(){
    var bgHeight = document.body.offsetWidth * img.height / img.width;
    document.body.style.height = bgHeight + 'px';
}
window.onresize = resize; resize();